import { mdcTextField, CATEGORIES } from '../../configuration/constants'

export default {
  // 组件名称
  name: mdcTextField,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${mdcTextField}" class="${mdcTextField}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
      .${mdcTextField} {
        width: 450px;
        padding: 10px;
        position: relative;
      }
      .${mdcTextField} >.mdc-text-field {
        width: 100%!important;
        height: 100%!important;
      }
      .mdc-text-field--outlined .mdc-floating-label--float-above {
        top: 10px!important;
      }
      .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
        transform: translateY(-100%) scale(0.75)!important;
      }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      label: `文本域`,
      attributes: {class:'fa fa-text-width'},
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '文本域',
      icon: 'globe',
      docUrl: '',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: mdcTextField,
      childrenSelectable: false,
      droppable: false,
      isFormItem: true,
      traits: [{
        name: 'fieldType',
        label: '类型',
        changeProp: 1,
        type: 'select',
        options: [{id: 'input', name: '单行'}, {id: 'textarea', name: '多行'}]
      }, {
        name: 'inputName',
        label: 'Name',
        changeProp: 1
      }, {
        name: 'inputId',
        label: 'Id',
        changeProp: 1
      }, {
        name: 'inputLabel',
        label: 'Label',
        changeProp: 1
      }, {
        name: 'leadingIcon',
        label: 'LeadingIcon',
        changeProp: 1
      }, {
        name: 'trailingIcon',
        label: 'TrailingIcon',
        changeProp: 1
      }],
      'fieldType': 'input',
      'inputName': '',
      'inputId': '',
      'inputLabel': '文本域',
      'leadingIcon': '',
      'trailingIcon': ''
    }
  },

  onModelScript() {
    const fieldType = ('{[ fieldType ]}').toString();
    const inputName = ('{[ inputName ]}').toString();
    const inputId = ('{[ inputId ]}').toString();
    const inputLabel = '{[ inputLabel ]}';
    const leadingIcon = '{[ leadingIcon ]}';
    const trailingIcon = '{[ trailingIcon ]}';
    const self = this;

    const $field = $(self).children('.mdc-text-field');
    if (fieldType == 'input' && $field.hasClass("mdc-text-field--textarea")) {
      $field.removeClass('mdc-text-field--textarea').children('.mdc-text-field__input').remove();
      $field.addClass('mdc-text-field--outlined').prepend('<input type="text" class="mdc-text-field__input" />' )
    } else if (fieldType == 'textarea' && $field.hasClass("mdc-text-field--outlined")) {
      $field.removeClass('mdc-text-field--outlined').children('.mdc-text-field__input').remove();
      $field.addClass('mdc-text-field--textarea').prepend('<textarea class="mdc-text-field__input"></textarea>' )
    }

    $(self).find('mdc-text-field__input').attr({id: inputId, name: inputName});
    $(self).find('label').attr('for', inputId);
    $(self).children('.mdc-text-field').removeClass("mdc-text-field--with-leading-icon", "mdc-text-field--with-trailing-icon").find('.material-icons').remove();
    if (Boolean(leadingIcon)) {
      $(self).children('.mdc-text-field').addClass("mdc-text-field--with-leading-icon").prepend("<i class='material-icons mdc-text-field__icon'>" + leadingIcon.toString() + "</i>")
    }
    if (Boolean(trailingIcon)) {
      $(self).children('.mdc-text-field').addClass("mdc-text-field--with-trailing-icon").prepend("<i class='material-icons mdc-text-field__icon'>" + trailingIcon.toString() + "</i>")
    }

    if (Boolean(inputLabel)) {
      const label = `<div class="mdc-notched-outline__notch" style=""><label for="${inputId}" class="mdc-floating-label" style="">${inputLabel}</label></div>`;
      $(self).find('.mdc-notched-outline .mdc-floating-label').text(label);
    } else {
      $(self).find('.mdc-notched-outline').children('.mdc-notched-outline__notch').remove();
    }

    !!mdc && mdc.textField.MDCTextField.attachTo(self.querySelector('.mdc-text-field'));

    if ($(self).parent().attr('data-gjs-type') !== 'form') {
      const eventName = `call-` + self.getAttribute('id');
      $(self).on("change", ".mdc-text-field__input", function(event) {
        const out = event.target.value.toString()
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: out
          }
        });
      })
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
      <div class="mdc-text-field text-field mdc-text-field--outlined">
        <input class="mdc-text-field__input" id="">
        <div class="mdc-notched-outline">
          <div class="mdc-notched-outline__leading"></div>
          <div class="mdc-notched-outline__trailing"></div>
        </div>
      </div>
      `)
    }
    const evn = "change:fieldType change:inputName change:inputId change:inputLabel change:leadingIcon change:trailingIcon"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
