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

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div class="${buttonSwitch}" data-gjs-type="${buttonSwitch}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${buttonSwitch} {
          flex: 0 0 auto;
          position: relative;
          width: 40px;
          height: 40px;
        }
        .${buttonSwitch}-track {
          position: relative;
          top: 25%;
          width: 100%;
          height: 50%;
          border-radius: 25% / 50%;
          opacity: 0.4;
        }
        .${buttonSwitch}-thumb-underlay {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .${buttonSwitch}-thumb {
          position: absolute;
          top: 20%;
          width: 60%;
          height: 60%;
          border-radius: 50%;
        }
        .${buttonSwitch}.checked .${buttonSwitch}-thumb {
          right: 0;
        }
        .${buttonSwitch} input[type="checkbox"] {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          z-index: 6;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label:'开关',
      attributes: {class:'fa fa-toggle-on'},
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '开关',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/728ef94b-20eb-47a2-bac3-a4d0034a2e62?# 《开关》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: buttonSwitch,
      resizable: true,
      childrenSelectable: false,
      droppable: false,
      isFormItem: true,
      traits: [{
        name: 'switchColor',
        label: '关闭色',
        type: 'color',
        changeProp: 1
      }, {
        name: 'checkedColor',
        label: '开启色',
        type: 'color',
        changeProp: 1
      }, {
        name: 'switchName',
        label: '开关名称',
        changeProp: 1
      }, {
        name: 'onValue',
        label: '开-值',
        changeProp: 1
      }, {
        name: 'offValue',
        label: '关-值',
        changeProp: 1
      }, {
        name: 'initValue',
        label: '默认开',
        type: 'checkbox',
        changeProp: 1
      }],
      'switchColor': '#888',
      'checkedColor': '#1890ff',
      'switchName': 'switch',
      'onValue': 'on',
      'offValue': 'off',
      'initValue': false
    }
  },

  onModelScript() {
    const switchColor = ('{[ switchColor ]}').toString();
    const checkedColor = ('{[ checkedColor ]}').toString();
    const switchName = ('{[ switchName ]}').toString();
    const onValue = ('{[ onValue ]}').toString();
    const offValue = ('{[ offValue ]}').toString();
    const initValue = Boolean('{[ initValue ]}');

    const self = this;
    const renderColor = function() {
      if ($(self).hasClass('checked')) {
        $(self).children('.switch-comp-track').css('background-color', checkedColor)
               .siblings().children('.switch-comp-thumb').css('background-color', checkedColor);
      } else {
        $(self).children('.switch-comp-track').css('background-color', switchColor)
               .siblings().children('.switch-comp-thumb').css('background-color', switchColor);
      }
    }

    $(self).find('input[type=checkbox]').attr({id: switchName, name: switchName})
    if (initValue) {
      $(self).addClass('checked').find('input[type=checkbox]').attr('checked', 'checked').val(onValue);
    } else {
      $(self).removeClass('checked').find('input[type=checkbox]').removeAttr('checked').val(offValue);
    }
    renderColor();

    $(self).on('change', 'input[type=checkbox]', function(event) {
        $(this).is(':checked') ? $(self).addClass('checked').find('input[type=checkbox]').val(onValue) : $(self).removeClass('checked').find('input[type=checkbox]').val(offValue)
        renderColor()
        if ($(self).parent().parent().attr('data-gjs-type') !== 'form' && window.spSocket) {
          const eventName = `call-` + self.getAttribute('id');
          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="${buttonSwitch}-track"></div>
        <div class="${buttonSwitch}-thumb-underlay">
          <div class="${buttonSwitch}-thumb">
          </div>
          <input type="checkbox" />
        </div>
      `)
    }
    const evn = "change:switchColor change:checkedColor change:switchName change:onValue change:offValue change:initValue"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
