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

export default {
  // modelType
  type: 'text',

  // 组件名称
  name: headline1,

  // 前面板html模板
  viewTemplate () {
    return `
      <div data-gjs-type="${headline1}" class="dsb-header"><h2>这是一个标题</h2></div>
    `
  },
  // 前面板html样式
  viewStyle () {
    return `
      <style>
        .dsb-header {
          font-size: 24px;
          font-weight: normal;
          white-space: nowrap;
          text-algin: center;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  // blockOptions () {
  //   return {
  //     category: CATEGORIES.TEXT,
  //     label: `标题1`,
  //     attributes: {class:'fa fa-header'},
  //   }
  // },

  spOptions() {
    return {
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/7edd7910-fa6f-42df-ac48-7bde980c3495?# 《标题》'
    }
  },

  // 组件属性
  componentOptions () {
    return {
      // droppable: true,
      textable: true,
      resizable: true,
      editable: true,
      traits: [
        // {
        //   name: 'textInner',
        //   label: '标题',
        //   changeProp: 1
        // },
        {
          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
        }
      ],
      // textInner: '这是一个标题',
      gradient: 'none',
      gradientColor: "red,rgba(255,194,13,0.8),#00AAFF",
    }
  },

  onModelScript () {
    const textInner = ('{[ textInner ]}').toString()
    const writingMode = ('{[ writingMode ]}').toString()
    const fontFamily = ('{[ fontFamily ]}').toString()
    const gradient = ('{[ gradient ]}').toString();
    const gradientColor = ('{[ gradientColor ]}').toString();

    const self = this
    
    $(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", '');
    }
    $(self).children('h2').text(textInner)
  },

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