export const BoxBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type: type,
      classes: [type],
      style: {
        padding: "5px",
        height: "50px",
        width: "auto",
      },
    },

    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
    <div class="drap-on-six"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="32" height="50"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"/></svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="#"
        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: "div",
          traits: [
            {
              type: "select",
              options: [
                { value: "div", name: "Div" },
                { value: "span", name: "Span" },
              ],
              label: "Type",
              name: "tagName",
              changeProp: 1,
            },
          ].concat(defaultModel.prototype.defaults.traits),
        },
      },
      {
        isComponent(el) {
          if (
            el.getAttribute &&
            el.getAttribute("data-gjs-type") === "box" &&
            el &&
            el.classList &&
            el.classList.contains("box")
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
