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

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div class="${formSwitch}" data-gjs-type="${formSwitch}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${formSwitch} {
          width: 450px;
          padding: 10px;
          display: flex;
        }
        .${formSwitch}.horizontal {
          align-items: center;
        }
        .${formSwitch}.vertical {
          flex-direction: column;
          align-items: flex-start;
          height: auto!important;
        }
        .${formSwitch}.horizontal .form-label {
          flex: 0 0 30%;
          margin: 0;
          padding: 0 16px;
          text-align: right;
        }
        .${formSwitch}.vertical .form-label {
          margin-bottom: 8px;
        }
        /* Switch component */
        .${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 {
      category: CATEGORIES.FORM,
      label: `
        <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <rect x="2" y="8" width="20" height="8" rx="4" ry="4" strokeWidth="1" fill="none" />
          <circle cx="18" cy="12" r="3" />
        </svg>
        <div class="gjs-block-label">开关</div>
      `
    };
  },

  // 组件属性
  componentOptions() {
    return {
      name: formSwitch,
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      droppable: false,
      traits: [{
        name: 'origin',
        label: '朝向',
        type: 'select',
        changeProp: 1,
        options: [{id: 'horizontal', name: '水平'}, {id: 'vertical', name: '垂直'}]
      }],
      'origin': 'horizontal',
    }
  },

  onModelScript() {
    const origin = ('{[ origin ]}').toString();

    const self = this;
    origin == 'horizontal' ? $(self).removeClass('vertical').addClass('horizontal') : $(self).removeClass('horizontal').addClass('vertical')
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
        <label class="form-label">Switch Label</label>
        <div class="${buttonSwitch}" data-gjs-type="${buttonSwitch}">
        </div>
      `)
    }
    const evn = "change:origin"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
