import { CATEGORIES, textRef } from '../../configuration/constants';
import { textDefaultListen } from '../../feature/traits/common'

export default {
  type: 'text',

  name: textRef,

  viewTemplate() {
    return `
      <div data-gjs-type="${textRef}" class="${textRef}">双击编辑文本</div>
    `
  },

  blockOptions() {
    return {
      label: '文本',
      attributes: { class: 'fa fa-font' }
    }
  },

  spOptions() {
    return {
      label: '显示文本',
      icon: 'globe',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/42216774-4a78-43f1-80a6-5aa590a406a2?# 《文本》',
      inPorts: [
        {
          uuid: 'in1',
          type: 'data',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ]
    }
  },

  componentOptions() {
    return {
      resizable: true,
      dmode: 'absolute',
      highlightable: false,
      childrenSelectable: true,
      droppable: false,
      traits: [{
        name: 'inLoader',
        label: '数据加载动画',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'gradient',
        label: '渐变类型',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'none', name: '无' }, { id: 'to bottom', name: '↓' }, { id: 'to top', name: '↑' }, { id: 'to right', name: '→' }, { id: 'to left', name: '←' }, { id: 'to bottom right', name: '↘' }, { id: 'to bottom left', name: '↙' }, { id: 'to top right', name: '↗' }, { id: 'to top left', name: '↖' }, {id: "circle", name: 'O'}],
      }, {
        name: 'gradientColor',
        label: '渐变颜色(,分隔)',
        changeProp: 1
      }, {
        name: 'wrap',
        label: '自动换行',
        changeProp: 1,
        type: 'checkbox'
      }],
      "gradient": 'none',
      "gradientColor": "red,rgba(255,194,13,0.8),#00AAFF",
      "inLoader": false,
      // "initText": "双击编辑文本"
    }
  },

  onModelScript() {
    const fontFamily = ('{[ fontFamily ]}').toString();
    const writingMode = ('{[ writingMode ]}').toString();
    const inLoader = Boolean('{[ inLoader ]}');
    const wrap = Boolean('{[ wrap ]}');
    const gradient = ('{[ gradient ]}').toString();
    const gradientColor = ('{[ gradientColor ]}').toString();
    const style = "display: inherit; margin: 0; font-family: inherit; font-size: inherit; color: inherit;";
    const self = this;
    const _id = self.getAttribute('id');
    const name = `call-${_id}`;
    inLoader ? $(self).attr('loader', 'in') : $(self).removeAttr('loader');
    $(self).css({ 'writing-mode': writingMode, 'font-family': fontFamily });
    if (gradient !== 'none') {
      if(gradient !== 'circle') {
        const linearGradient = `linear-gradient(${gradient},${gradientColor})`;
        $(self).css("background", linearGradient);
      } else {
        const radialGradient = `radial-gradient(${gradientColor})`;
        $(self).css("background", radialGradient);
      }
      $(self).css("-webkit-text-fill-color", 'transparent');
      $(self).css("-webkit-background-clip", 'text');
    } else {
      $(self).css("background", '');
      $(self).css("-webkit-text-fill-color", '');
      $(self).css("-webkit-background-clip", '');
    }

    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      inLoader && window.loader && $(self).append($(window.loader.ele));
      window.spSocket.subscribe({
        eventName: name,
        callback: function (data) {
          inLoader && window.loader && window.loader.remove(_id);
          self.innerHTML = `<pre style="${style}">${data.data.in1}</pre>`;
        }
      });
    }
  },

  onViewInit() {
    const evn = textDefaultListen + ' change:inLoader change:events change:gradient change:gradientColor change:wrap';
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
}
