import headingIcon from "raw-loader!../../icons/heading-solid.svg";
export const HeaderBlock = (bm, category, label, type) => {
  bm.add(type, {
    label: label,
    category: category,
    content: {
      type,
      content: "My Sample Heading",
    },

    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${headingIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-header"
          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>    
    `,
  });

  bm.add(type + "frequently_used", {
    label: label,
    category: "Frequently Used",
    attributes: {
      style: "order: 0",
    },
    content: {
      type,
      content: "My Sample Heading",
    },

    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${headingIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-header"
          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 textType = dc.getType("text");
  const textModel = textType.model;
  const textView = textType.view;

  dc.addType(type, {
    model: textModel.extend(
      {
        defaults: Object.assign({}, textModel.prototype.defaults, {
          "custom-name": label,
          resizable: true,
          tagName: "h1",
          traits: [
            {
              type: "select",
              options: [
                { value: "h1", name: "One (largest)" },
                { value: "h2", name: "Two" },
                { value: "h3", name: "Three" },
                { value: "h4", name: "Four" },
                { value: "h5", name: "Five" },
                { value: "h6", name: "Six (smallest)" },
              ],
              label: "Size",
              name: "tagName",
              changeProp: 1,
            },
            {
              type: "class_select",
              options: [
                { value: "", name: "None" },
                { value: "display-1", name: "One (largest)" },
                { value: "display-2", name: "Two " },
                { value: "display-3", name: "Three " },
                { value: "display-4", name: "Four (smallest)" },
              ],
              label: "Display Heading",
            },
          ].concat(textModel.prototype.defaults.traits),
        }),
      },
      {
        isComponent(el) {
          if (el && ["H1", "H2", "H3", "H4", "H5", "H6"].includes(el.tagName)) {
            return { type };
          }
        },
      }
    ),
    view: textView,
  });
};
