import { mdcRadioGroup, mdcRadio, CATEGORIES } from '../../configuration/constants'

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${mdcRadioGroup}" class="${mdcRadioGroup}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${mdcRadioGroup} {
          width: 450px;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
        }
        .${mdcRadioGroup} > .mdc-form-field {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: auto;
          font-size: inherit;
          color: currentColor;
        }
        .${mdcRadioGroup} > .mdc-form-field > label {
          margin-bottom: 0!important;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M512.04516 848.034576c185.584476 0 336.034576-150.450099 336.034575-336.034576S697.629636 175.965424 512.04516 175.965424 176.010584 326.415524 176.010584 512 326.460684 848.034576 512.04516 848.034576z m0 48.004939C299.951841 896.039515 128.005645 724.093319 128.005645 512S299.951841 127.960485 512.04516 127.960485 896.084675 299.906681 896.084675 512 724.138479 896.039515 512.04516 896.039515z" "></path><path d="M512.04516 512m-230.428225 0a230.428225 230.428225 0 1 0 460.85645 0 230.428225 230.428225 0 1 0-460.85645 0Z"></path></svg>
        <div class="gjs-block-label">单选</div>
      `,

    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '单选',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/f199143b-e31f-4c6a-b3fd-21c5fbbb6d40?# 《单选》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: mdcRadioGroup,
      resizable: true,
      highlightable: false,
      droppable: false,
      isFormItem: true,
      traits: [{
        name: 'columns',
        label: '列数',
        changeProp: 1,
        type: 'number',
        min: 1,
        step: 1
      }, {
        name: 'borderColor',
        label: '默认颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'selectedColor',
        label: '选中颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'initChecked',
        label: '默认值',
        changeProp: 1
      }],
      'columns': 3,
      'initChecked': null
    }
  },

  onModelScript() {
    const columns = Number('{[ columns ]}');
    const initChecked = '{[ initChecked ]}';
    const borderColor = '{[ borderColor ]}';
    const selectedColor = '{[ selectedColor ]}';
    
    const self = this;
    const eventName = `call-` + self.getAttribute('id');

    const width = Math.floor(100 / columns) + '%';
    $(self).children('.mdc-form-field').css({'flex-basis': width});

    let timer = null;
    const onMounted = function() {
      const mounted = $(self).find('input[type=radio]').attr('name');
      if (mounted) {
        if (borderColor || selectedColor) {
          let style = $('style#mdc-radio');
          if (style) {
            $(style).remove();
          }
          style = document.createElement('style'); 
          style.id = 'mdc-radio'; 
          style.type = 'text/css'; 
          const notChecked = borderColor ? `
            .mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle { border-color: ${borderColor} }
          ` : ''; 
          const checked = selectedColor ? `
            .mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle, .mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle { border-color: ${selectedColor};
          ` : ''; 
          style.innerHTML = `${notChecked} ${checked}`; 
          document.getElementsByTagName('HEAD').item(0).append(style); 
        }
        if (Boolean(initChecked)) {
          const $checkedRadio = $(self).find('input[value=' + initChecked + ']');
          $checkedRadio && $checkedRadio.attr({checked: true});
          if (!($(self).parent().attr('class') && $(self).parent().attr('class').indexOf('form-panel') > -1) && window.spSocket ) {
            window.spSocket.send({
              eventName: eventName,
              data: {
                success: true,
                out1: initChecked
              }
            });
          }
        } else {
          $(self).find('input[type=radio]').attr('checked', false);
        }
        if(timer) {
          clearTimeout(timer);
          timer = null;
        }
      } else {
        timer = setTimeout(onMounted, 300);
      }
    }
    onMounted();

    if (!($(self).parent().attr('class') && $(self).parent().attr('class').indexOf('form-panel') > -1) && window.spSocket ) {
      $(self).on("change", "input[type=radio]", 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-form-field" data-gjs-type="${mdcRadio}">
        </div>
        <div class="mdc-form-field" data-gjs-type="${mdcRadio}">
        </div>
        <div class="mdc-form-field" data-gjs-type="${mdcRadio}">
        </div>
      `)
    }
    const evn = "change:columns change:initChecked change:selectedColor change:borderColor"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
