export const LinkBoxBlock = (bm, category, label, type) => {
  const icon =
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="50"><path d="M11 13c.2.4.2.8 0 1.1-.4.3-.8.3-1.1 0a3.8 3.8 0 010-5.3L12.5 6a3.8 3.8 0 015.4 5.4l-1.1 1c0-.5-.1-1.2-.3-1.7l.3-.4a2.3 2.3 0 000-3.2 2.3 2.3 0 00-3.2 0L11 9.9a2.3 2.3 0 000 3.2zm2-3.1c.4-.3.8-.3 1.1 0a3.8 3.8 0 010 5.3L11.5 18A3.8 3.8 0 016 12.5l1.1-1c0 .5.1 1.2.3 1.7l-.3.4a2.3 2.3 0 000 3.2 2.3 2.3 0 003.2 0l2.7-2.7a2.3 2.3 0 000-3.2.7.7 0 010-1zM3 3v18h18V3H3zm0-2h18a2 2 0 012 2v18a2 2 0 01-2 2H3a2 2 0 01-2-2V3c0-1.1.9-2 2-2z"></path></svg>';

  bm.add(type, {
    label,
    category: category,
    content: {
      type: type,
      classes: [type],
      style: {
        display: "inline-block",
        padding: "5px",
        height: "50px",
        width: "50px",
        cursor: "pointer",
      },
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${icon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-container"
          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) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          "custom-name": label,
          resizable: true,
          tagName: "a",
          traits: [
            {
              type: "webconnect-href",
              name: "href",
              label: false,
            },
            {
              type: "webconnect-link",
              label: false,
            },
            {
              type: "webconnect-event",
              label: "Event",
              name: "onclick",
            },
            {
              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,
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (
            el.tagName &&
            el.tagName === "A" &&
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === type
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
