export const ParagraphBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type,
      content:
        "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.",
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six"><svg viewBox="0 0 20 20" width="32" height="50" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-380.000000, -5199.000000)">
          <g transform="translate(56.000000, 160.000000)">
              <path d="M334,5049 L330,5049 C325,5049 325,5041 330,5041 L334,5041 L334,5049 Z M330,5039 C322,5039 322,5051 330,5051 L334,5051 L334,5059 L336,5059 L336,5041 L338,5041 L338,5059 L340,5059 L340,5041 L344,5041 L344,5039 L330,5039 Z"></path>
          </g>
      </g>
  </svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-paragraph"
          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: "p",
          traits: [
            {
              type: "class_select",
              options: [
                { value: "", name: "No" },
                { value: "lead", name: "Yes" },
              ],
              label: "Lead?",
            },
          ].concat(textModel.prototype.defaults.traits),
        }),
      },
      {
        isComponent(el) {
          if (el && el.tagName && el.tagName === "P") {
            return { type: type };
          }
        },
      }
    ),
    view: textView,
  });
};
