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

export default {

  // 组件名称
  name: ledRef,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${ledRef}" class="${ledRef}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${ledRef} {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.6);
          background: -webkit-radial-gradient(50% 40%, #fafafa, #888);
          background: -o-radial-gradient(50% 40%, #fafafa, #888);
          background: -moz-radial-gradient(50% 40%, #fafafa, #888);
          background: radial-gradient(50% 40%, #fafafa, #888);
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `灯`,
      attributes: {class:'fa fa-lightbulb-o'},
    };
  },

  spOptions() {
    return {
      label: '灯',
      icon: 'microchip',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/8dc1b874-d52f-4dbf-978c-08eede4bb79e?# 《灯》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'string',
          description: {
            zh_CN: '输入一个字符串'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [{
        name: 'onColor',
        label: '点亮颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'offColor',
        label: '熄灭颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'onValue',
        label: '点亮值',
        changeProp: 1
      }, {
        name: 'initValue',
        label: '默认点亮',
        changeProp: 1,
        type: 'checkbox'
      }],
      onColor: '#0084ff',
      offColor: '#888',
      onValue: 'on',
      initValue: false
    }
  },

  onModelScript() {
    const onColor = '{[ onColor ]}';
    const offColor = '{[ offColor ]}';
    const onValue = ('{[ onValue ]}').toString();
    const initValue = Boolean('{[ initValue ]}');
    const self = this;
    const _id = self.getAttribute('id');
    var eventName = `call-${_id}`;
    
    function transferColorToRgba(color, alpha=1) {
      if (typeof color !== 'string' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
      color = color.charAt(0) === '#' ? color.substring(1) : color;
      if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
      if (color.length === 3) {
          color = color.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
      }
      var reg = /\w{2}/g;
      var colors = color.match(reg);
      for (var i = 0; i < colors.length; i++) {
          colors[i] = parseInt(colors[i], 16).toString();
      }
      return 'rgba(' + colors.join() + ',' + alpha + ')';
    }

    const on_center_color = transferColorToRgba(onColor, 0.3);
    const off_center_color = transferColorToRgba(offColor, 0.3);
    const on_gradient = `radial-gradient(50% 40%, ${on_center_color}, ${onColor})`;
    const off_gradient = `radial-gradient(50% 40%, ${off_center_color}, ${offColor})`;

    const renderLed = function (on) {
      const gradient = on ? on_gradient : off_gradient;
      const shadowColor = on ? onColor : offColor;
      $(self).css({"background": gradient, "box-shadow": "0 0 8px" + shadowColor});
    };

    renderLed(initValue);

    if (window.spSocket) {
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          const value = _data.data.in1;
          if (value) {
            const on = value.toLowerCase() === onValue.toLowerCase();
            renderLed(on);
          }
        }
      });
    }
  },

  onViewInit() {
    const evn = "change:onColor change:offColor change:onValue change:initValue"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
