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

  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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="32" height="50">
    <path d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/>
    </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 (domc, label, type, opts = {}) => {
  const defaultType = domc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const pfx = opts.pfxCards;

  const { toolbarBtnDrapCodeCardsCardCode, 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.propsDrapCodeCardsCardCode,
        },

        init() {
          this.listenTo(
            this,
            `change:${refs.keyDrapCodeCardsCustomCode}`,
            this.onDrapCodeCardSectionCodeChange
          );

          const initialCode =
            this.get(refs.keyDrapCodeCardsCustomCode) ||
            opts.cardsPlaceholderContent;

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

          // Add the custom code toolbar button if requested and it's not already in
          if (
            toolbarBtnDrapCodeCardsCardCode &&
            !toolbar.filter((tlb) => tlb.id === id).length
          ) {
            toolbar.unshift({
              id,
              command: commands.drapcode_cards_custom_code,
              label: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="14">
              <path d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/>
              </svg>`,
              attributes: { title: "Select Card" },
              ...toolbarBtnDrapCodeCardsCardCode,
            });
          }
        },

        onDrapCodeCardSectionCodeChange() {
          this.components(this.get(refs.keyDrapCodeCardsCustomCode));
        },
      },
      {
        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.keyDrapCodeCardsCustomCode) || "";
          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_cards_custom_code, { target });
      },
    }),
  });
};
