export const ButtonBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    activate: true,
    select: true,
    content: `
          <button type="submit" class="btn btn-primary btn-sm">Send</button>
      `,
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
    <div class="drap-on-six"><svg class="gjs-block-svg" viewBox="0 0 24 24" width="32" height="50" xmlns="http://www.w3.org/2000/svg">
    <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
    <rect class="gjs-block-svg-path" x="4" y="11.5" width="16" height="1"></rect>
    </svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="https://academy.drapcode.com/docs/app-builder/form-components#button"
        draggable="false"
      >
        <i class="bem-Svg ${className}__info-fa fa fa-info-circle" title="Check how to use ${label}?"></i>
      </a>
    </div>
    <div class="drapcode-com-one">${model.get("label")}</div>
  </div>
    `,
  });
};

export default (dc, label, type, command) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  let timedInterval;
  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          editable: true,
          droppable: false,
          resizable: true,
          attributes: {
            role: "button",
          },
          traits: [
            ...defaultModel.prototype.defaults.traits,
            {
              type: "content",
              label: "Text",
            },
            {
              label: "Type",
              type: "button-type",
              name: "type",
              options: [
                { value: "submit", name: "Submit" },
                { value: "reset", name: "Reset" },
                { value: "button", name: "Button" },
              ],
            },
            {
              type: "webconnect-text",
              label: false,
              content: "Send",
            },
            {
              label: "Prevent Double Click",
              type: "checkbox",
              name: "data-prevent-dblclick",
            },
            {
              label: "Disable Duration (milliseconds)",
              type: "number",
              name: "data-disable-duration",
              placeholder: "eg. 5000",
              min: 1000, // Minimum number value
              max: 15000, // Maximum number value
              step: 500, // Number of steps
              default: 5000,
            },
          ],
        },
        init() {},
        onCustomButtonChange() {
          this.components(this.get(type));
        },
        afterChange(e) {
          if (this.attributes.type === type) {
            if (
              this.attributes.classes.filter((klass) => {
                return klass.id === "btn" || klass.id === "dc-button";
              }).length === 0
            ) {
              this.changeType("link");
            }
          }
        },
      },
      {
        isComponent(el) {
          if (
            el &&
            el.classList &&
            (el.classList.contains("btn") ||
              el.classList.contains("dc-button") ||
              el.tagName === "BUTTON")
          ) {
            return { type };
          }
        },
      }
    ),
    view: defaultView.extend({
      events: {
        click: "handleClick",
        dblclick: "onActive",
      },

      init() {
        this.listenTo(this.model, "change:content", this.updateContent);
        this.listenTo(
          this.model.components(),
          "add remove reset",
          this.onComponentsChange
        );
        this.onComponentsChange();
      },

      onComponentsChange() {
        timedInterval && clearInterval(timedInterval);
        timedInterval = setTimeout(() => {
          const { model } = this;
          //   const content = model.get(type) || "";
          let droppable = 1;
          //   if (content.indexOf("<script") >= 0) {
          //     this.el.innerHTML = opts.placeholderScript;
          //     droppable = 0;
          //   }
          model.set({ droppable });
        }, 0);
      },

      onActive() {
        const target = this.model;
        this.em.get("Commands").run(command, { target });
      },

      updateContent() {
        this.el.innerHTML = this.model.get("content");
      },

      handleClick(e) {
        e.preventDefault();
      },
    }),
  });
};
