import imageIcon from "raw-loader!../../icons/image-solid.svg";
export const ImageBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: {
      type,
      style: { height: "250px" },
    },
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${imageIcon}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/basic-component-image"
          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 img_src_default =
    "https://drapcode-static.s3.amazonaws.com/default.png";
  const imageType = dc.getType("image");
  const model = imageType.model;
  const view = imageType.view;
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;

  dc.addType(type, {
    model: model.extend(
      {
        defaults: {
          ...model.prototype.defaults,
          "custom-name": label,
          tagName: "img",
          resizable: 1,
          loading: "eager",
          attributes: {
            src: img_src_default,
            loading: "eager",
          },
          classes: ["img-fluid"],
          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",
            },
            ...model.prototype.defaults.traits,
            ...defaultModel.prototype.defaults.traits,
            {
              type: "webconnect-image",
              label: false,
              content: "Insert your text here",
            },
          ],
        },
      },
      {
        isComponent: function (el) {
          if (el && el.tagName === "IMG") {
            return { type: type };
          }
        },
      }
    ),
    view: view,
  });
};
