import fontIcon from "raw-loader!../../icons/font-solid.svg";
export const TextBlock = (bm, category, label, type) => {
  bm.add("text", {
    label,
    category: category,
    content: {
      type: "text",
      content: "Insert your text here",
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">
        ${fontIcon}
      </div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-text"
          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 defaultView = defaultType.view;
  const defaultModel = defaultType.model;
  const textType = dc.getType("text");
  const textView = textType.view;

  dc.addType(type, {
    model: defaultModel.extend({
      defaults: {
        ...defaultModel.prototype.defaults,
        "custom-name": label,
        tagName: "div",
        droppable: true,
        editable: true,
        resizable: true,
        traits: [
          ...textType.model.prototype.defaults.traits,
          {
            type: "webconnect-text",
            label: false,
            content: "Insert your text here",
          },
        ],
      },
    }),
    view: textView,
  });
};
