import icon from "raw-loader!../../icons/play-circle.svg";
export const IframeBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category,
    type,
    content: "<iframe> </iframe>",
    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" aria-hidden="true" role="img" width="32" height="50" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke-width="1.5"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 3v18M18 3v18M3 6h18"/><path fill="currentColor" fill-rule="evenodd" d="M9.6 9h4.8a.6.6 0 0 1 .6.6v4.8a.6.6 0 0 1-.6.6H9.6a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6Z" clip-rule="evenodd"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 18h18"/></g></svg></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 iframe_src_default =
    "https://drapcode-static.s3.amazonaws.com/default.png";
  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,
          tagName: "iframe",
          resizable: true,
          attributes: {
            src: iframe_src_default,
            loading: "eager",
          },

          traits: [
            {
              type: "text",
              label: "Source (URL)",
              name: "src",
            },
            {
              type: "select",
              options: [
                { value: "eager", name: "Eager (Default: Loads Immediately)" },
                { value: "lazy", name: "Lazy (Loads Asynchronously)" },
                { value: "auto", name: "Auto" },
              ],
              label: "Load Type",
              name: "loading",
            },
            ...defaultModel.prototype.defaults.traits,
            {
              type: "webconnect-iframe",
              label: false,
              content: "Insert your text here",
            },
          ],
        },
      },
      {
        isComponent: function (el) {
          if (
            el &&
            el.tagName === "IFRAME" &&
            el.className !== "embed-responsive-item"
          ) {
            return { type: type };
          }
        },
      }
    ),
    view: defaultView,
  });
};
