export const CarouselsBlock = (bm, category, label, type, opts = {}) => {
  const c = opts;
  const pfx = c.pfxCarousels;

  bm.add(type, {
    label,
    category: category,
    activate: true,
    select: true,
    content: `
        <div class='${pfx}' data-js=${type} data-gjs-type=${type}>
        </div>`,

    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
    <div class="drap-on-six"><svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="32" height="50">
    <path d="M22 7.6c0-1-.5-1.6-1.3-1.6H3.4C2.5 6 2 6.7 2 7.6v9.8c0 1 .5 1.6 1.3 1.6h17.4c.8 0 1.3-.6 1.3-1.6V7.6zM21 18H3V7h18v11z" fill-rule="nonzero"/><path d="M4 12.5L6 14v-3zM20 12.5L18 14v-3z"/>
    </svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="https://academy.drapcode.com/docs/app-builder/layout-component-sections"
        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 function(editor, opts = {}) {
export default (domc, label, type, opts = {}) => {
  const defaultType = domc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const pfx = opts.pfxCarousels;

  const { toolbarBtnDrapCodeCarouselsCarouselCode, refs, commands } = opts;

  let timedInterval;
  domc.addType("script", {
    view: {
      onRender() {
        const isCC = this.model.closestType(type);
        isCC && (this.el.innerHTML = "");
      },
    },
  });

  domc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,

          name: label,
          editable: true,
          droppable: false,
          ...opts.propsDrapCodeCarouselsCarouselCode,
        },

        init() {
          this.listenTo(
            this,
            `change:${refs.keyDrapCodeCarouselsCustomCode}`,
            this.onDrapCodeCarouselSectionCodeChange
          );

          const initialCode =
            this.get(refs.keyDrapCodeCarouselsCustomCode) ||
            opts.carouselsPlaceholderContent;

          !this.components().length && this.components(initialCode);
          const toolbar = this.get("toolbar");
          const id = "drapcode-carousels";

          // Add the custom code toolbar button if requested and it's not already in
          if (
            toolbarBtnDrapCodeCarouselsCarouselCode &&
            !toolbar.filter((tlb) => tlb.id === id).length
          ) {
            toolbar.unshift({
              id,
              command: commands.drapcode_carousels_custom_code,
              label: `<svg viewBox="0 0 24 24" height="16" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 7.6c0-1-.5-1.6-1.3-1.6H3.4C2.5 6 2 6.7 2 7.6v9.8c0 1 .5 1.6 1.3 1.6h17.4c.8 0 1.3-.6 1.3-1.6V7.6zM21 18H3V7h18v11z" fill-rule="nonzero"/><path d="M4 12.5L6 14v-3zM20 12.5L18 14v-3z"/>
              </svg>`,
              attributes: { title: "Select Carousel" },
              ...toolbarBtnDrapCodeCarouselsCarouselCode,
            });
          }
        },

        onDrapCodeCarouselSectionCodeChange() {
          this.components(this.get(refs.keyDrapCodeCarouselsCustomCode));
        },
      },
      {
        isComponent(el) {
          if (el.getAttribute && el.getAttribute("data-gjs-type") === type) {
            return {
              type: type,
            };
          }
        },
      }
    ),

    view: defaultView.extend({
      // Active on Double Click
      // events: {
      //   dblclick: 'onActive',
      // },

      init() {
        this.listenTo(
          this.model.components(),
          "add remove reset",
          this.onComponentsChange
        );
        this.onComponentsChange();
      },

      onComponentsChange() {
        timedInterval && clearInterval(timedInterval);
        timedInterval = setTimeout(() => {
          const { model } = this;
          const content = model.get(refs.keyDrapCodeCarouselsCustomCode) || "";
          let droppable = 1;

          if (content.indexOf("<script") >= 0) {
            this.el.innerHTML = opts.placeholderScript;
            droppable = 0;
          }

          model.set({ droppable });
        }, 0);
      },

      onActive() {
        const target = this.model;
        this.em
          .get("Commands")
          .run(commands.drapcode_carousels_custom_code, { target });
      },
    }),
  });
};
