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

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

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${mdcSlider}" class="${mdcSlider}-wrap">
      </div>
    `
  },

  // 前面板html样式
  viewStyle() {
    return `
      <style>
      .${mdcSlider}-wrap {
        width: 450px;
        padding: 10px;
      }
      </style>
    `
  },
  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg  class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M917.696 435.968h-362.88v-41.664c0-44.352-36.096-80.64-80.64-80.64H277.184c-44.352 0-80.64 36.096-80.64 80.64v41.664h-90.24c-40.512 0-73.728 33.024-73.728 73.728 0 40.512 33.024 73.728 73.728 73.728h90.432v46.464c0 44.352 36.096 80.64 80.64 80.64H474.56c44.352 0 80.64-36.096 80.64-80.64v-46.464h362.88c40.512 0 73.728-33.024 73.728-73.728-0.384-40.704-33.408-73.728-74.112-73.728z m-411.84 193.728c0 17.472-14.208 31.488-31.488 31.488H277.184c-17.472 0-31.488-14.208-31.488-31.488v-46.464h0.192V435.968h-0.192v-41.664c0-17.472 14.208-31.488 31.488-31.488h197.184c17.472 0 31.488 14.208 31.488 31.488v235.392z" ></path></svg>
        <div class="gjs-block-label">滑块</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '滑块',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/c9933394-fda1-4e37-866b-3da6f0512f43?# 《滑块》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ],
      outPorts: [
        {
          uuid: 'out1',
          subType: 'all',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: mdcSlider,
      childrenSelectable: false,
      droppable: false,
      traits: [{
        name: 'sliderType',
        label: '滑块类型',
        type: 'select',
        options: [{ id: 'continuous', name: '连续型' }, { id: 'discrete', name: '分离型' }],
        changeProp: 1
      }, {
        name: 'sliderTrick',
        label: '刻度',
        type: 'checkbox',
        changeProp: 1
      }, {
        name: 'sliderMin',
        label: '最小值',
        type: 'number',
        changeProp: 1
      }, {
        name: 'sliderMax',
        label: '最大值',
        type: 'number',
        changeProp: 1
      }, {
        name: 'sliderStep',
        label: '步长',
        type: 'number',
        changeProp: 1
      }, {
        name: 'defaultValue',
        label: '默认值',
        type: 'number',
        changeProp: 1
      }, {
        name: 'sliderRealtime',
        label: '实时输出结果',
        type: 'checkbox',
        changeProp: 1
      }],
      'sliderType': 'continuous',
      'sliderTrick': true,
      'sliderMin': 0,
      'sliderMax': 100,
      'sliderStep': 1,
      'defaultValue': 0,
      'sliderRealtime': false
    }
  },

  onModelScript() {
    const sliderType = ('{[ sliderType ]}').toString();
    const sliderMin = Boolean('{[ sliderMin ]}') ? Number('{[ sliderMin ]}') : 0;
    const sliderMax = Boolean('{[ sliderMax ]}') ? Number('{[ sliderMax ]}') : 0;
    const sliderStep = Boolean('{[ sliderStep ]}') ? Number('{[ sliderStep ]}') : 0;
    const sliderTrick = Boolean('{[ sliderTrick ]}');
    const sliderRealtime = Boolean('{[ sliderRealtime ]}');
    const defaultValue = Boolean('{[ defaultValue ]}') ? Number('{[ defaultValue ]}') : 0;

    const self = this;

    if (sliderType == "discrete") {
      const pin = '<div class="mdc-slider__pin"><span class="mdc-slider__pin-value-marker"></span></div>'
      $(self).children().addClass('mdc-slider--discrete').children('.mdc-slider__thumb-container').prepend(pin);
    } else {
      $(self).children().removeClass('mdc-slider--discrete').children('.mdc-slider__thumb-container').children('.mdc-slider__pin').remove();
    }
    $(self).children().attr({ "aria-valuemin": sliderMin, "aria-valuemax": sliderMax, "aria-valuenow": sliderMin, "data-step": sliderStep });
    if (sliderTrick) {
      $(self).children().addClass('mdc-slider--display-markers');
      $(self).find('.mdc-slider__track-container').append('<div class="mdc-slider__track-marker-container"></div>');
    } else {
      $(self).children().removeClass('mdc-slider--display-markers');
      $(self).find('.mdc-slider__track-marker-container').remove();
    }

    let slider;
    const mdc = window.mdc || window.parent.mdc;
    if (!!mdc) {
      slider = mdc.slider.MDCSlider.attachTo(self.querySelector('.mdc-slider'));
      slider.foundation_.setValue(defaultValue);
    }

    if (slider && window.spSocket) {
      const eventName = `call-` + self.getAttribute('id');
      slider.listen(sliderRealtime ? 'MDCSlider:input' : 'MDCSlider:change', () => {
        const out = slider.value.toString();
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: out
          }
        });
      });
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let in1 = _data.data.in1;
          if (in1) {
            slider.foundation_.setValue(Number(in1));
          }
        }
      });
    }
  },

  onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add(`
      <div class="mdc-slider" tabindex="0" role="slider" aria-label="Select Value">
        <div class="mdc-slider__track-container">
          <div class="mdc-slider__track"></div>
        </div>
        <div class="mdc-slider__thumb-container">
          <svg class="mdc-slider__thumb" width="21" height="21">
            <circle cx="10.5" cy="10.5" r="7.875"></circle>
          </svg>
          <div class="mdc-slider__focus-ring"></div>
        </div>
      </div>
      `)
    }
    const evn = "change:sliderType change:sliderTrick change:sliderMin change:sliderMax change:sliderStep change:defaultValue"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
