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

export default {
  name: buttonGroupRef,
  viewTemplate() {
    return `
      <div data-gjs-type="${buttonGroupRef}" class="${buttonGroupRef}"></div>
    `;
  },
  viewStyle() {
    return `
      <style>
        .${buttonGroupRef} {
          display: flex;
          padding: 0;
          border: none;
          justify-content: space-between;
        }
        .${buttonGroupRef}.tab-nav {
          border: 1px solid #dcdcdc;
          border-radius: 1px;
          overflow: hidden;
        }
        .${buttonGroupRef}.vertical {
          display: flex;
          flex-direction: column;
          justify-content: stretch;
        }
        .${buttonGroupRef} > button {
          flex-grow: 1;
          margin: 4px;
          padding: 8px 16px;
          border: none;
          border-radius: 3px;
          font-size: 14px;
          background-color: #f0f0f0;
        }
        .${buttonGroupRef}.tab-nav > button {
          margin: 0;
          padding: 9px 16px 13px;
          border-radius: 0;
          color: #9e9e9e;
          border-top: 4px solid transparent;
        }
        .${buttonGroupRef} > button.active {
          background-color: #5262bc;
          color: white;
          outline: none;
        }
        .${buttonGroupRef}.tab-nav > button.active {
          border-top-color: #5262bc;
          background-color: #fff;
          color: #3f51b5;
        }
        .${buttonGroupRef}.tab-tab > button {
          margin: 0 12px;
          padding: 4px;
          color: rgba(255,255,255,0.5);
          background: none;
          border-radius: 0;
          border-bottom: 3px solid transparent;
        }
        .${buttonGroupRef}.tab-tab > button.active {
          border-bottom-color: #006ced;
          color: #006ced;
        }
        .${buttonGroupRef} > button:focus {
          outline: none;
        }
      </style>
    `;
  },
  blockOptions() {
    return {
      label: "按钮组",
      attributes: { class: "fa fa-cube" },
    };
  },
  spOptions() {
    // 后面板属性
    return {
      label: "按钮组",
      icon: "globe",
      docUrl: "",
      outPorts: [
        {
          uuid: "out1",
          type: "data",
          ioType: "out",
          subType: "string",
          display: true,
          description: {
            zh_CN: "输出1",
          },
        },
      ],
    };
  },
  componentOptions() {
    return {
      resizable: true,
      dmode: "absolute",
      highlightable: false,
      droppable: false,
      name: "button-group",
      traits: [
        {
          name: "authorInfo",
          label: "开发者",
          type: "authorInfo",
          author: "秋水",
          email: "qiushui.smy@xuelangyun.com",
        },
        {
          name: "docUrl",
          label: "文档",
          type: "link",
          href:
            "https://xuelangyun.yuque.com/docs/share/148ef051-6270-45f5-80e3-48be3f250428?# 《按钮组》",
        },
        {
          label: "垂直",
          type: "checkbox",
          name: "vertical",
          changeProp: 1,
        },
        {
          label: "Labels",
          changeProp: 1,
          name: "label",
        },
        {
          label: "Params",
          changeProp: 1,
          name: "params",
        },
        {
          label: "默认发送Param",
          changeProp: 1,
          name: "defaultParam",
        },
        {
          label: "风格",
          changeProp: 1,
          name: "styles",
          type: "select",
          options: ["button", "nav", "tab"],
        },
      ],
      label: "今日,本周,本月",
      params: "1,2,3",
      defaultParam: "",
      vertical: false,
      styles: "button",
    };
  },
  onModelScript() {
    var label = "{[ label ]}",
      params = "{[ params ]}",
      defaultParam = "{[ defaultParam ]}",
      type = Boolean("{[ vertical ]}"),
      styles = "{[ styles ]}";

    if (params.indexOf(",") > -1) {
      params = params.split(",").map(function (item) {
        return item.trim();
      });
    } else {
      params = [params];
    }

    if (label.indexOf(",") > -1) {
      label = label.split(",").map(function (item) {
        return item.trim();
      });
    } else {
      label = [label];
    }

    const self = this;

    self.innerHTML = "";
    $(self).attr("class", "xly-btnGroup tab-" + styles);
    if (type) {
      $(self).addClass("vertical");
    } else {
      $(self).removeClass("vertical");
    }

    params.forEach(function (item, index) {
      const elBtn = document.createElement("button");
      const text = label[index] || label[label.length - 1];
      if (item == defaultParam) {
        elBtn.setAttribute("class", "active");
      }
      elBtn.appendChild(document.createTextNode(text));
      elBtn.setAttribute("data-param", item);
      self.appendChild(elBtn);
    });

    var eventName = `call-` + self.getAttribute("id");
    var param = defaultParam;
    $(self).on("click", "button", function (e) {
      $(this).addClass("active").siblings().removeClass("active");
      param = $(this).attr("data-param");
      if (window.spSocket) {
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out1: param
          },
        });
      }
    });
    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      window.spSocket.send({
        eventName: eventName,
        data: {
          success: true,
          out1: param
        },
      });
    }
  },
  onViewInit() {
    const evn =
      "change:vertical change:label change:params change:defaultParam change:styles";
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
};
