import icon from "raw-loader!../../icons/play-circle.svg";
export const AudioBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category,
    content: {
      type: type,
      style: {
        height: "32px",
        width: "300px",
      },
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${icon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-audio"
          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 audioType = dc.getType("audio");
  const model = audioType.model;
  const view = audioType.view;
  dc.addType(type, {
    model: model.extend(
      {
        defaults: Object.assign({}, model.prototype.defaults, {
          "custom-name": label,
          resizable: true,
          classes: ["audio"],
        }),
      },
      {
        isComponent: function (el) {
          if (el && el.className === "audio") {
            return { type };
          }
        },
      }
    ),
    view: view,
  });
};
