export const VideoBlock = (bm, category, label, type) => {
  bm.add(type, {
    label: label,
    category,
    content: {
      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" viewBox="0 0 576 512" width="32" height="50"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-video"
          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 videoType = dc.getType("video");
  const model = videoType.model;
  const view = videoType.view;
  type = "bs-embed-responsive";
  dc.addType(type, {
    model: model.extend(
      {
        defaults: Object.assign({}, model.prototype.defaults, {
          "custom-name": label,
          resizable: true,
          droppable: false,
          draggable: false,
          copyable: false,
          classes: ["embed-responsive-item"],
        }),
      },
      {
        isComponent: function (el) {
          if (el && el.className === "embed-responsive-item") {
            return { type };
          }
        },
      }
    ),
    view: view,
  });
};
