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

  bm.add(type, {
    label,
    category: category,
    activate: true,
    select: true,
    content: `
        <section class='${pfx}' data-js=${type} data-gjs-type=${type} style='padding: 12px;min-height: auto;'>
        </section>`,

    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" width="32" height="50" fill="currentColor" class="bi bi-grid-3x2-gap-fill" viewBox="0 0 16 16">
    <path d="M1 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zM1 9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V9z"/>
    </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>
    `,
  });
  bm.add(type + "frequently_used", {
    label,
    category: "Frequently Used",
    attributes: {
      style: "order: 3",
    },
    activate: true,
    select: true,
    content: `
        <section class='${pfx}' data-js=${type} data-gjs-type=${type} style='padding: 12px;min-height: auto;'>
        </section>`,

    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" width="32" height="50" fill="currentColor" class="bi bi-grid-3x2-gap-fill" viewBox="0 0 16 16">
    <path d="M1 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zM1 9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V9z"/>
    </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.pfxSections;

  const { toolbarBtnDrapCodeSectionsSectionCode, 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.propsDrapCodeSectionsSectionCode,
        },

        init() {
          this.listenTo(
            this,
            `change:${refs.keyDrapCodeSectionsCustomCode}`,
            this.onDrapCodeSectionsSectionCodeChange
          );

          const initialCode =
            this.get(refs.keyDrapCodeSectionsCustomCode) ||
            opts.sectionsPlaceholderContent;

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

          // Add the custom code toolbar button if requested and it's not already in
          if (
            toolbarBtnDrapCodeSectionsSectionCode &&
            !toolbar.filter((tlb) => tlb.id === id).length
          ) {
            toolbar.unshift({
              id,
              command: commands.drapcode_sections_custom_code,
              label: `<svg fill="currentColor" class="bi bi-grid-3x2-gap-fill" viewBox="0 0 16 16">
              <path d="M1 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zM1 9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V9z"/>
            </svg>`,
              attributes: { title: "Select Section" },
              ...toolbarBtnDrapCodeSectionsSectionCode,
            });
          }
        },

        onDrapCodeSectionsSectionCodeChange() {
          this.components(this.get(refs.keyDrapCodeSectionsCustomCode));
        },
      },
      {
        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.keyDrapCodeSectionsCustomCode) || "";
          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_sections_custom_code, { target });
      },
    }),
  });
};
