import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import LinkWithTooltip from './tooltip';
import { Modal, ModalManager } from './index'
import { connect } from 'react-redux'

class SpPageBuilderModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      type: '',
      rowIndex: '',
      colIndex: '',
      data: []
    };
  }

  componentDidMount() {

    var ajaxData = {
      type: this.props.sectionType,
      rowIndex:   this.props.rowIndex,
    };

    if ( typeof this.props.settings !== 'undefined' ) {
      ajaxData.settings = this.props.settings;
    };

    if ( typeof this.props.colIndex !== 'undefined' ) {
      ajaxData.colIndex = this.props.colIndex;
    };

    if ( typeof this.props.addonIndex !== 'undefined' ) {
      ajaxData.addonIndex = this.props.addonIndex;
    };

    if ( typeof this.props.addonName !== 'undefined' ) {
      ajaxData.addonName = this.props.addonName;
    };

    if ( typeof this.props.innerColIndex !== 'undefined' ) {
      ajaxData.innerColIndex = this.props.innerColIndex;
    };

    if ( typeof this.props.addonInnerIndex !== 'undefined' ) {
      ajaxData.addonInnerIndex = this.props.addonInnerIndex;
    };

    this.loadSettingsFromServer(ajaxData);
  }

  loadSettingsFromServer(ajaxData){

    jQuery.ajax({
      type: 'POST',
      url: 'index.php?option=com_sppagebuilder&view=ajax&format=json&callback=setting',
      dataType: 'json',
      data: ajaxData,
      cache: false,
      success: function(response) {

        if ( response.status ) {

          if(ajaxData.type === 'list'){
            if( typeof ajaxData.innerColIndex !=='undefined' ) {
              this.setState({
                type: response.type,
                rowIndex: response.rowIndex,
                colIndex: response.columnIndex,
                addonIndex: response.addonIndex,
                data: response.data,
                category: 'All',
                categories: response.categories,
                innerColIndex: ajaxData.innerColIndex
              });
            }
            else
            {
              this.setState({
                type: response.type,
                rowIndex: response.rowIndex,
                colIndex: response.columnIndex,
                addonIndex: response.addonIndex,
                data: response.data,
                category: 'All',
                categories: response.categories
              });
            }
          }

          if (ajaxData.type === 'row' || ajaxData.type === 'column' || ajaxData.type === 'inner_row') {
            this.setState({
              type: response.type,
              rowIndex: response.rowIndex,
              colIndex: response.columnIndex,
              addonIndex: response.addonIndex,
              data: response.data,
            });
          }

          if (ajaxData.type === 'addon') {
            this.setState({
              type: response.type,
              rowIndex: response.rowIndex,
              colIndex: response.columnIndex,
              addonIndex: response.addonIndex,
              data: response.data,
              addonName: ajaxData.addonName
            });
          }

          if (ajaxData.type === 'inner_column') {
            this.setState({
              type: response.type,
              rowIndex: response.rowIndex,
              colIndex: response.columnIndex,
              addonIndex: response.addonIndex,
              data: response.data,
              innerColIndex: ajaxData.innerColIndex
            });
          }

          if (ajaxData.type === 'inner_addon') {
            this.setState({
              type: response.type,
              rowIndex: response.rowIndex,
              colIndex: response.columnIndex,
              addonIndex: response.addonIndex,
              data: response.data,
              addonName: ajaxData.addonName,
              innerColIndex: ajaxData.innerColIndex,
              addonInnerIndex: ajaxData.addonInnerIndex
            });
          }
        }

        jQuery('#sp-pagebuilder-modal-actions').removeClass('hidden');

      }.bind(this)
    });
  }

  saveSettings( e ) {
    e.preventDefault();

    var $ = jQuery,
    formNode = ReactDOM.findDOMNode(this.refs.settingForm),
    formData = {};

    $(formNode).find('.sp-pagebuilder-parent-input-field').each(function(){
      var $that = $(this);

      if ($that.hasClass('sp-pagebuilder-grouped-wrap')) {
        var group = [],
        field_name = $that.data('field_name');

        $that.find('.sp-pagebuilder-grouped-item').each(function(i) {
          var subField = {};
          $(this).find('.sp-pagebuilder-form-group').each(function() {

            var $element = $(this).find('.sp-pagebuilder-addon-input');

            if ($element.length < 1) {
              $element = $(this).find('.wf-editor, .mce_editable');
              if ($element.length > 0) {
                if (typeof WFEditor !== 'undefined') {
                  var fieldId = $element.attr('id');
                  var val = WFEditor.getContent(fieldId);
                } else {
                  var val = $element.val();
                }
              }
            } else {
              var val = $element.val();
            }

            var list    = $element.attr('name');
            if (list != undefined) {
              var list    = list.split('['),
                  name    = list[2].replace(']','');
            }

            if(list != undefined && name != undefined) {
              subField[name] = val;
            }
          });
          group[i] = subField;
        });

        formData[field_name] = group;
      } else {
        var $element = $that.find('.sp-pagebuilder-addon-input');
        if ($element.length < 1) {
          $element = $that.find('.wf-editor, .mce_editable');
          if ($element.length > 0) {
            if (typeof WFEditor !== 'undefined') {
              var fieldId = $element.attr('id');
              var val = WFEditor.getContent(fieldId);
            } else {
              var val = $element.val();
            }
          }
        } else {
          var val = $element.val();
        }
        var name = $element.attr('name');

        if(name != undefined) {
          formData[name] = val;
        }
      }
    });

    var options = {
      type: this.state.type,
      index: this.state.rowIndex,
      settings: {
        formData: formData
      }
    };

    if ( this.state.type !== 'row' ) {
      options.settings.colIndex = this.state.colIndex;
    };

    if ( this.state.type !== 'row' || this.state.type !== 'column' ) {
      options.settings.addonIndex = this.state.addonIndex;
    };

    if ( this.state.type === 'inner_column' || this.state.type === 'inner_addon' ) {
      options.settings.innerColIndex  = this.state.innerColIndex;
    };

    if ( this.state.type === 'addon' || this.state.type === 'inner_addon' ) {
      options.settings.addonName = this.state.addonName;
      options.settings.addon_title = $(formNode).find('.sp-pagebuilder-parent-input-field').data('addon_title');
      options.settings.addon_icon = $(formNode).find('.sp-pagebuilder-parent-input-field').data('addon_icon');
    };

    if (this.state.type === 'inner_addon') {
      options.settings.addonInnerIndex  = this.state.addonInnerIndex;
    };

    ModalManager.close();
    this.props.saveSetting( options );
  }

  addonSettingsNew( addonName ) {

    addonName = addonName.replace(/sp_/g, '');

    var ajaxData = {
      rowIndex:   this.state.rowIndex,
      colIndex:   this.state.colIndex,
      addonName:  addonName
    };

    if (typeof this.state.addonIndex !== 'undefined') {
      ajaxData.addonIndex = this.state.addonIndex;
    };

    if (typeof this.state.innerColIndex !== 'undefined') {
      ajaxData.innerColIndex = this.state.innerColIndex;
      ajaxData.type = 'inner_addon';
    }else{
      ajaxData.type = 'addon';
    }

    if (typeof this.state.addonInnerIndex !== 'undefined') {
      ajaxData.addonInnerIndex = this.state.addonInnerIndex;
    };

    this.loadSettingsFromServer( ajaxData );
  }

  // Parent Child
  parentChildRelation() {
    // Normal
    jQuery('.sp-pagebuilder-parent-input-field:not(.sp-pagebuilder-grouped-wrap) *[data-depends]*').each(function() {
      if(jQuery(this).attr('data-depends') != undefined) {
        var depends = jQuery.parseJSON(jQuery(this).attr('data-depends'));

        var condition = [];
        for (var i = 0; i < depends.length; i++) {
          var operator = depends[i][1];
          var operand1 = jQuery('[name="'+ depends[i][0] +'"]').val();
          var operand2 = depends[i][2];
          if(operator == '=') {
            if(operand1 == operand2) {
              condition[i] = 'true';
            } else {
              condition[i] = 'false';
            }
          } else if(operator == '!=') {
            if(operand1 != operand2) {
              condition[i] = 'true';
            } else {
              condition[i] = 'false';
            }
          }
        }

        if(jQuery.inArray('false', condition) > -1) {
          jQuery(this).parent().hide();
        } else {
          jQuery(this).parent().fadeIn(300);
        }
      }
    });

    // Repeatable
    jQuery('.sp-pagebuilder-repeatable-input-field *[data-depends]*').each(function() {
      if(jQuery(this).attr('data-depends') != undefined) {
        var $this = jQuery(this);
        var depends = jQuery.parseJSON($this.attr('data-depends'));
        var name = $this.find('.sp-pagebuilder-addon-input').attr('name').split('[');

        if(name.length > 1) {
          var condition_repeatable = [];
          for (var i = 0; i < depends.length; i++) {
            var operator = depends[i][1];
            var operand1 = jQuery('[name="' + name[0] + '[' + name[1] + '[' + depends[i][0] + ']"]').val();
            var operand2 = depends[i][2];
            if(operator == '=') {
              if(operand1 == operand2) {
                condition_repeatable[i] = 'true';
              } else {
                condition_repeatable[i] = 'false';
              }
            } else if(operator == '!=') {
              if(operand1 != operand2) {
                condition_repeatable[i] = 'true';
              } else {
                condition_repeatable[i] = 'false';
              }
            }
          }

          if(jQuery.inArray('false', condition_repeatable) > -1) {
            jQuery(this).parent().hide();
          } else {
            jQuery(this).parent().fadeIn(300);
          }
        }
      }
    });
  }

  settingsColorPicker(){

    jQuery('.minicolors').minicolors({
      control: 'hue',
      format: 'rgb',
      position: 'bottom',
      opacity: true,
      theme: 'bootstrap'
    });

    //tinyMce Init
    tinymce.init({
      force_br_newlines : true,
      force_p_newlines : false,
      forced_root_block : '',
      toolbar_items_size: "small",
      invalid_elements : "script,applet",

      content_css : "administrator/components/com_sppagebuilder/assets/css/tinymce.css",

      theme: 'modern',
      setup: function (editor) {
        editor.on('change', function () {
          editor.save();
        });
      },
      plugins: [
        "advlist autolink lists link charmap preview image",
        "searchreplace code fullscreen",
        "media contextmenu paste"
      ],
      relative_urls : true,
      document_base_url : pagebuilder_base,
      image_class_list: [
        {title: 'None', value: ''},
        {title: 'Left', value: 'pull-left'},
        {title: 'Right', value: 'pull-right'}
      ],

      toolbar: "styleselect | bold italic fontsizeselect | alignleft aligncenter alignright alignjustify | blockquote | bullist numlist | link image fullscreen"
    });

    // Media
    jQuery('.sp-pagebuilder-media-input').each(function() {
      var self = jQuery(this),
      media_id = 'media-' + Math.floor(Math.random() * (1e6 - 1 + 1) + 1);
      self.removeAttr('id').attr('id', media_id);
    });

    // Chosen
    jQuery('.sp-pagebuilder-grouped-wrap select').each(function() {
      var editor_id = 'sp_pagebuilder_chosen_' + Math.floor(Math.random() * (1e6 - 1 + 1) + 1);
      jQuery(this).removeAttr('id').attr('id', editor_id);
    });

    jQuery('.sp-pagebuilder-modal').find('select').chosen({
      "disable_search_threshold":10,
      allow_single_deselect:true
    });

    // Parent Child
    var that = this;
    that.parentChildRelation();
    jQuery(document).on('change', '.sp-pagebuilder-addon-input', function(event) {
      that.parentChildRelation();
    });

    var $richEditor = jQuery('.sp-pagebuilder-modal-content').find('.wf-editor, .mce_editable');

    if ($richEditor.length) {
      $richEditor.each(function() {
        var self = jQuery(this),
        editor_id = 'sp-pagebuilder-editor-' + Math.floor(Math.random() * (1e6 - 1 + 1) + 1);
        self.removeAttr('id').attr('id', editor_id);
        if (typeof WFEditor == 'undefined'){
          tinymce.execCommand('mceAddEditor', true, editor_id);
        }
        if (typeof WFEditor !== 'undefined') {
          /* jQuery('.wf-editor-header').empty(); */
          WFEditor.create(editor_id);
        }
      });
    }
  }

  componentDidUpdate(){
    this.settingsColorPicker();
    this.addonShortable();
  }

  addonShortable(){
    jQuery( ".sp-pagebuilder-grouped" ).sortable({
      placeholder: "ui-state-highlight",
      handle: '.sp-pagebuilder-move-repeatable',
      forcePlaceholderSize: true,
      axis: 'y',
      opacity: 0.8,
      tolerance: 'pointer',
      start: function(event, ui){
        var $richEditor = jQuery('.sp-pagebuilder-modal-content').find('.wf-editor, .mce_editable');
        $richEditor.each(function() {
          jQuery(this).prev('.wf-editor-header').empty();
          tinymce.execCommand('mceRemoveEditor', false, jQuery(this).attr('id'));
        });
      },
      stop: function(event, ui){
        var $richEditor = jQuery('.sp-pagebuilder-modal-content').find('.wf-editor, .mce_editable');

        if ($richEditor.length) {
          $richEditor.each(function() {
            var editor_id = 'sp-pagebuilder-editor-' + Math.floor(Math.random() * (1e6 - 1 + 1) + 1);
            jQuery(this).removeAttr('id').attr('id', editor_id);

            if (typeof WFEditor == 'undefined') {
              tinymce.execCommand('mceAddEditor', true, editor_id);
            }

            if (typeof WFEditor !== 'undefined') {
              WFEditor.create(editor_id);
            }
          });
        }

        jQuery(this).find('.sp-pagebuilder-grouped-item').each(function(index){
          var newIndex = index + 1;
          jQuery(this).find('.sp-pagebuilder-repeatable-item-title').text('Item '+ newIndex );
        })
      }
    });
  }

  filterCategoryClickHandle(cat){
    const { data } = this.state;

    var newdate = data.map(function(addon){
      if (addon.category == cat || cat == 'All') {
        addon.visibility = true;
      }else{
        addon.visibility = false;
      }
      return addon;
    });

    this.setState({
      category: cat,
      data: newdate
    });
  }

  // Seacrh Filter Handle
  searchChangeHandle() {
    const { data, category } = this.state;
    const item = this.refs.searchItem.value;
    const regex = new RegExp('.*?' + item + '.*?', 'i');

    var newdate = data.map(function(addon){
      if ( regex.test(addon.title)) {
        addon.visibility = true;
      } else {
        addon.visibility = false;
      }
      return addon;
    });

    this.setState({
      category: 'All',
      data:newdate
    });
  }

  __renderCategories() {
    return(
      <ul>
        {this.state.categories.map((category,index)=>
          <li
            className={this.state.category == category.name?'sp-pagebuilder-addon-category-item active':'sp-pagebuilder-addon-category-item '}
            key={index}
            data-category={category.name}
            onClick={(e)=>{
              this.filterCategoryClickHandle(category.name);
            }}>
            <a href="javascript:void(0)">
              <span>{category.name}</span><span className="sp-pagebuilder-addons-count">{category.count}</span>
            </a>
          </li>
        )}
      </ul>
    )
  }

  render() {
    let customClass = '';
    let modalTitle = '';

    if (this.state.type != '') {
      if(this.state.type !== 'list') {
        customClass = 'sp-pagebuilder-modal-small';
        if (this.state.type == 'addon' || this.state.type == 'inner_addon') {
          var addon_name = this.state.addonName;
          modalTitle = Joomla.JText._("COM_SPPAGEBUILDER_ADDON") + ': ' + addonsJSON[addon_name].title;
        }
        if (this.state.type == 'row' || this.state.type == 'inner_row') {
          modalTitle = Joomla.JText._("COM_SPPAGEBUILDER_ROW_OPTIONS");
        }
        if (this.state.type == 'column' || this.state.type == 'inner_column') {
          modalTitle = Joomla.JText._("COM_SPPAGEBUILDER_ROW_COLUMNS_OPTIONS");
        }
      } else {
        modalTitle = Joomla.JText._("COM_SPPAGEBUILDER_ADDONS_LIST");
      }
    }

    return(
      <Modal
        onRequestClose = {this.props.onRequestClose}
        openTimeoutMS = {0}
        customClass = { customClass }
        title = { modalTitle }
        closeTimeoutMS ={0} >
        {
          this.state.type !== 'list'
          ?
          <div>
            <form ref="settingForm" className="form settings-form" onSubmit={ this.saveSettings.bind(this) }>
              <div dangerouslySetInnerHTML={ { __html: this.state.data } } />
              <div id="sp-pagebuilder-modal-actions" className="sp-pagebuilder-modal-actions hidden">
                <button type="submit" className="sp-pagebuilder-btn sp-pagebuilder-btn-success"><i className="fa fa-check-square-o"></i> Apply</button>
                <a href="#" className="sp-pagebuilder-btn sp-pagebuilder-btn-default" onClick={ e => {
                    e.preventDefault();
                    ModalManager.close()
                  }}>
                  <i className="fa fa-times-circle"></i> Cancel
                  </a>
                </div>
              </form>
            </div>
            :
            <div className="sp-pagebuilder-modal-list-addons clearfix">
              <div className="sp-pagebuilder-modal-sidebar">
                <div className="sp-pagebuilder-modal-sidebar-inner">
                  <div>
                    <div className="sp-pagebuilder-brand">
                      <img src={pagebuilder_base + 'administrator/components/com_sppagebuilder/assets/img/logo-white.svg'} alt="SP Page Builder" />
                    </div>
                    {this.__renderCategories()}
                  </div>
                </div>
              </div>

              <div className="sp-pagebuilder-modal-header clearfix">
                <div className="sp-pagebuilder-addons-search">
                  <i className="fa fa-search"></i>
                  <input
                    type="text"
                    className="sp-pagebuilder-form-control"
                    ref="searchItem"
                    id="search-addon"
                    placeholder="Search Addon"
                    onChange={ this.searchChangeHandle.bind(this)}
                    />
                </div>

                <LinkWithTooltip tooltip={Joomla.JText._("COM_SPPAGEBUILDER_MODAL_CLOSE")} position="left" id="sp-pagebuilder-close-modal">
                  <a href="#" className="sp-pagebuilder-close-modal" onClick={ e => {
                      e.preventDefault();
                      ModalManager.close()
                    }}>
                    <i className="pbfont pbfont-close"></i>
                  </a>
                </LinkWithTooltip>
              </div>

              <div className="sp-pagebuilder-modal-body">
                <div className="sp-pagebuilder-modal-body-inner">
                  <div className="sp-pagebuilder-addons-list clearfix">
                    <ul>
                      {
                        this.state.data.map( ( addon,index )=>
                        addon.visibility &&
                        <li key={index} onClick={ this.addonSettingsNew.bind( this, addon.addon_name ) }>
                          <span>
                            <LinkWithTooltip tooltip={addon.desc} position="top" id={"addon_tooltip_" + addon.addon_name}>
                              <span>
                                <img src={addon.icon} alt={addon.title} />
                                <span>{addon.title}</span>
                              </span>
                            </LinkWithTooltip>
                          </span>
                        </li>
                      )
                    }
                  </ul>
                </div>
              </div>
            </div>

          </div>
        }
      </Modal>
    )
  }
}

export default SpPageBuilderModal;
