import { iconFont, CATEGORIES } from "../../configuration/constants";

import icons from "../../assets/icon.txt";

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

  // 前面板html模板
  viewTemplate() {
    return `
      <i data-gjs-type="${iconFont}" class="frontpanel-iconfont ${iconFont}"></i>
    `;
  },

  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .frontpanel-iconfont .${iconFont} {
          width: 36px;
          height: 37px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M511.616 71.04c70.848 0 135.04 28.672 181.44 75.136a255.872 255.872 0 0 1 75.2 181.504 255.872 255.872 0 0 1-113.28 212.864c54.272 20.48 102.976 52.288 143.232 92.48a403.008 403.008 0 0 1 118.912 286.08 34.944 34.944 0 0 1-69.888 0A335.296 335.296 0 0 0 512 584.32H511.168a335.232 335.232 0 0 0-335.232 334.848 34.944 34.944 0 0 1-69.888 0c0-111.68 45.44-212.864 118.912-286.144a406.208 406.208 0 0 1 143.168-92.48 255.936 255.936 0 0 1-113.28-212.864 256 256 0 0 1 75.264-181.504A255.936 255.936 0 0 1 511.616 71.04z m132.032 124.608A186.24 186.24 0 0 0 511.616 140.8a186.24 186.24 0 0 0-132.096 54.784 186.24 186.24 0 0 0-54.72 132.032c0 51.584 20.928 98.304 54.72 132.096a186.24 186.24 0 0 0 131.648 54.72H512a186.304 186.304 0 0 0 131.648-54.72 186.24 186.24 0 0 0 54.72-132.096 186.24 186.24 0 0 0-54.72-132.032z"></path></svg>
        <div class="gjs-block-label">图标</div>
      `,
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: "图标",
      icon: "globe",
      docUrl: "",
    };
  },

  // 组件属性
  componentOptions() {
    return {
      droppable: false,
      traits: [
        {
          name: "docUrl",
          label: "文档",
          type: "link",
          href:
            "https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.de12df413&cid=9402",
        },
        {
          name: "iconName",
          label: "图标名称",
          changeProp: 1,
        },
        {
          name: 'changeIcon',
          type: "button",
          text: "更换图标",
          full: true, // Full width button
          command(editor, model) {
            this.handleOpenModal(editor, model);
          },
        },
        {
          name: "size",
          label: "字体大小",
          changeProp: 1,
          type: "number",
          min: 12,
          max: 120,
          step: 1,
        },
        {
          name: "weight",
          label: "字体粗细",
          changeProp: 1,
          type: "select",
          options: [
            { id: "light", name: "细" },
            { id: "normal", name: "常规" },
            { id: "bold", name: "粗" },
          ],
        },
        {
          name: "color",
          label: "字体颜色",
          changeProp: 1,
          type: "color",
        },
      ],
      iconName: "search",
      size: 36,
      weight: "normal",
      color: "#333333",
    };
  },

  handleSelectIcon(editor, e) {
    const target = e.target;
    if (target.matches(`button[class~=${iconFont}]`)) {
      const iconKey = target.dataset.type;
      this.set("iconName", iconKey);

      editor.Modal.close();
    }
  },

  handleOpenModal(editor, model) {
    const iconKeys = JSON.parse(icons)["icons"].map((icon) => icon.font_class);
    const modal = editor.Modal;
    const handleSelectIcon = this.handleSelectIcon.bind(this, editor);

    document.addEventListener("click", handleSelectIcon);

    modal
      .open({
        title: "选择图标",
        content: `
          <div class="icon-select-mdl">
            ${iconKeys
              .map(
                (iconKey) => `
                  <div class="icon-select-block" title=${iconKey}>
                    <button class="spicon icon-${iconKey}" data-type=${iconKey}></button>
                    <p class="icon-name">${iconKey}</p>
                  </div>
                `
              )
              .join("")}            
          </div>
      `,
      })
      .getModel()
      .once("change:open", () =>
        document.removeEventListener("click", handleSelectIcon)
      );
  },

  onModelScript() {
    const iconName = "{[ iconName ]}".toString();
    const size = "{[ size ]}" + "px";
    const weight = "{[ weight ]}".toString();
    const color = "{[ color ]}";

    const self = this;
    $(self).attr("class", "spicon icon-" + iconName);
    $(self).css({ "font-size": size, "font-weight": weight, color: color });
  },

  onViewInit(config) {
    const evn = "change:iconName change:size change:weight change:color";
    const changeIconCmd = this.model.getTrait('changeIcon').get('command');

    this.model.getTrait('changeIcon').set('command', changeIconCmd.bind(this.model));

    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
};
