export const ColumnBreakBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type: type,
    },
    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" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 42 42" width="32" height="50">
     <path d="M37.059,8H26H16H4.941C2.224,8,0,10.282,0,13s2.224,5,4.941,5H16h10h11.059 C39.776,18,42,15.718,42,13S39.776,8,37.059,8z"/>
     <path d="M37.059,24H26H16H4.941C2.224,24,0,26.282,0,29s2.224,5,4.941,5H16h10h11.059 C39.776,34,42,31.718,42,29S39.776,24,37.059,24z"/>
    </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: Object.assign({}, defaultModel.prototype.defaults, {
          "custom-name": label,
          tagName: "div",
          resizable: true,
          classes: ["w-100"],
        }),
      },
      {
        isComponent(el) {
          if (el && el.classList && el.classList.contains("w-100")) {
            return { type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
