export const PageContentPlaceholderBlock = (bm, category, label, type) => {
  bm.add(type, {
    label: `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="50" fill="currentColor" class="bi bi-file-earmark-richtext" viewBox="0 0 16 16">
    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"></path>
    <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"></path>
    </svg>
          <div>${label}</div>
          `,
    category: category,
    content: {
      type: type,
      classes: [type],
      content: `<div style="padding:16% 0;height:200px; width:auto;text-align:center" >Page Placeholder</div>`,
      attributes: { id: "page-placeholder" },
    },

    render: ({ model, className }) => `
      <div class="${className}-label ${className}__drapcode-wrap">
      ${model.get("label")}
      </div>
  
      <span class="${className}__info no-doc">
        <a target="_blank" href="https://academy.drapcode.com/docs/app-builder/basic-component-header" draggable="false">
          <i class="${className}__info-fa fa fa-info-circle" style="margin-left: 5px" title="Check how to use ${label}?"></i>
        </a>
      </span>
    `,
  });
};

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") === "pagePlaceholder" &&
            el &&
            el.classList &&
            el.classList.contains("pagePlaceholder")
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
