import { rangeRef } from "../../configuration/constants";

export default (editor, opt = {}) => {
  const domc = editor.DomComponents;
  const defaultType = domc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  // 滑块
  domc.addType(rangeRef, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          name: "range",
          resizable: true,
          dmode: "absolute",
          highlightable: false,
          droppable: false,
          traits: [
            {
              label: "最大值",
              changeProp: 1,
              name: "max",
              type: "number",
            },
            {
              label: "最小值",
              changeProp: 1,
              name: "min",
              type: "number",
            },
            {
              label: "步长",
              changeProp: 1,
              name: "step",
              type: "number",
            },
            {
              label: "默认值",
              changeProp: 1,
              name: "defaultValue",
              type: "number",
            },
          ],
          max: 100,
          min: 1,
          step: 1,
          defaultValue: 0,
          script: function () {
            const max = parseInt("{[ max ]}");
            const min = parseInt("{[ min ]}");
            const step = parseInt("{[ step ]}");
            const defaultValue = parseInt("{[ defaultValue ]}");
            $(this).attr({
              max: max,
              min: min,
              step: step,
              defaultValue: defaultValue,
              type: "range",
            });

            const self = this;
            const eventName = `call-` + self.getAttribute("id");
            if (defaultValue && window.spSocket) {
              window.spSocket.send({
                eventName: eventName,
                data: {
                  success: true,
                  out1: defaultValue
                },
              });
            }
            $(self).on("change", function (e) {
              var value = e.target.value;
              // 有 dashboardHost 说明是运行模式
              if (window.spSocket) {
                window.spSocket.send({
                  eventName: eventName,
                  data: {
                    success: true,
                    out1: value
                  },
                });
              }
            });
          },
        },
        init() {
          this.addAttributes({
            sp: {
              metadata: {
                label: "滑动块",
                icon: "globe",
                def: {
                  type: 22,
                  params: {},
                  ports: [
                    {
                      uuid: "out1",
                      type: "data",
                      ioType: "out",
                      subType: "string",
                      display: true,
                      description: {
                        zh_CN: "输出1",
                      },
                    },
                  ],
                },
                ui: {
                  tabs: {},
                },
              },
            },
          });
        },
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") == rangeRef) {
            return { type: rangeRef };
          }
        },
      }
    ),
    view: defaultView.extend({
      init() {
        const evn = "change:max change:min change:step change:defaultValue";
        this.listenTo(this.model, evn, this.updateScript);
        this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
      },
    }),
  });
};
