// External Dependencies
import React from 'react';
import $ from 'jquery';
import { findDOMNode } from 'react-dom';

// Internal Dependencies
import AjaxComponent from './../base/AjaxComponent';
import './style.css';


class Image extends AjaxComponent {

    static slug = 'dss_toolset_image';

    static css(props) {
        const additionalCss = [];

        additionalCss.push([{
            selector: '%%order_class%% .dss_svg_image',
            declaration: "display: block;",
        }]);


        if ('on' === props.force_fullwidth) {
            additionalCss.push([{
                selector: '%%order_class%%',
                declaration: "max-width: 100% !important;",
            }]);

            additionalCss.push([{
                selector: '%%order_class%% .et_pb_image_wrap, %%order_class%% img',
                declaration: "width: 100%;",
            }]);
        }

        if ('' !== props.align) {
            additionalCss.push([{
                selector: '%%order_class%%',
                declaration: `text-align: ${props.align}`,
            }]);
        }

        if ('center' !== props.align) {
            additionalCss.push([{
                selector: '%%order_class%%',
                declaration: `margin-${props.align}: 0;`,
            }]);
        }

        if ('on' === props.use_overlay) {
            additionalCss.push([{
                selector: '%%order_class%% .et_overlay:before',
                declaration: `color: ${props.overlay_icon_color}`,
            }]);

            additionalCss.push([{
                selector: '%%order_class%% .et_overlay',
                declaration: `background-color: ${props.hover_overlay_color}`,
            }]);
        }

        return additionalCss;
    }

    componentDidUpdate() {
        const lightbox = findDOMNode(this.refs.lightbox);

        if (!lightbox) return;

        $(lightbox).magnificPopup({
            type: 'image',
            removalDelay: 500,
            mainClass: 'mfp-fade',
            zoom: {
                enabled: true,
                duration: 500,
                opener: function (element) {
                    return element.find('img');
                }
            }
        });
    }

    _shouldReload(oldProps, newProps) {
        return oldProps.toolset_field !== newProps.toolset_field ||
            oldProps.field_url !== newProps.field_url ||
            oldProps.image_size !== newProps.image_size;
    }

    _reloadData(props) {
        return {
            action: 'dss_toolset_image',
            post_id: window.ETBuilderBackend.postId,
            toolset_field: props.toolset_field,
            field_url: props.field_url,
            image_size: props.image_size,
            load_image_attributes: props.load_image_attributes,
            nonce: window.DsSuitToolsetBuilderData.nonces.dss_toolset_image
        };
    }

    render() {
        return super.render();
    }

    _render() {
        return (
            <div>
                {this._renderLabel()}
                {this._renderField()}
            </div>
        );
    }

    _renderLabel() {
        var label;
        switch (this.props.toolset_label) {
            case 'off':
                return null;
            case 'custom':
                label = this.props.label_custom;
                break;
            case 'field':
                label = this.props.label_prefix + this.state.result.field.name + this.props.label_suffix;
                break;
            default:
                label = "";
        }

        const Element = this.props.toolset_label_element || 'h3';

        return (
            <Element className="dss_toolset_label">{label}</Element>
        );
    }

    _renderField() {
        const props = this.props;
        const state = this.state;
        const utils = window.ET_Builder.API.Utils;

        var image_url = this.state.result.field_meta_value;
        var image_alt = '';
        var image_title = '';

        if ('off' === props.load_image_attributes) {
            image_alt = props.image_alt;
            image_title = props.image_title;
        } else {
            image_alt = state.result.image_alt;
            image_title = state.result.image_title;
        }

        if ('on' === props.toolset_field_hide_empty && (!image_url || '' === image_url)) {
            return <div>{window.DsSuitToolsetBuilderData.i18n.empty_field_will_be_hidden}</div>;
        }

        var overlay = null;
        var additional_classes = [
            'et_pb_image',
            'et_pb_module',
        ];

        //Get overlay
        if ('on' === props.use_overlay) {
            additional_classes.push('et_pb_has_overlay');
            overlay = (<span data-icon={utils.processFontIcon(props.hover_icon)} className="et_overlay et_pb_inline_icon"></span>);
        }

        //Create the image
        var image = null;
        if (state.result.image_thumb_url && '' !== state.result.image_thumb_url) {
            image = (
                <span className="et_pb_image_wrap">
                    <img className="et_pb_dss_toolset_image_image" src={state.result.image_thumb_url} alt={image_alt} />
                    {overlay}
                </span>
            );
        }

        //Embedd image in lightbox or url if necessary
        if ('on' === props.show_in_lightbox) {
            image = (
                <a ref="lightbox" href={state.result.image_url} className="et_pb_lightbox_image" title={image_title}>
                    {image}
                </a>
            );
        } else if ('off' !== props.link) {
            var url = '';
            switch (props.link) {
                case 'image':
                    url = state.image_url;
                    break;
                case 'custom_url':
                    url = props.custom_url;
                    break;
                case 'field_url':
                    url = state.field_url;
                    break;
                default:
                    break;
            }

            if ('' !== url) {
                image = (
                    <a href={url}>
                        {image}
                    </a>
                );
            }
        }

        if ('on' === props.always_center_on_mobile) {
            additional_classes.push('et_always_center_on_mobile');
        }

        if (state.is_svg) {
            additional_classes.push('dss_svg_image');
        }

        return (
            <div className={additional_classes.join(" ")}>
                {image}
            </div>
        );
    }
}

export default Image;