import constants from "./constants";
export const TabsBlock = (bm, category, label, type) => {
  const { tabsBlock, style } = constants;

  const content = `<div data-gjs-type="${type}"></div>
    ${style ? `<style>${style}</style>` : ""}`;

  tabsBlock &&
    bm.add(type, {
      label,
      category: category,
      content,
      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">
      <g fill-rule="evenodd">
        <path d="M22 9.3c0-.8-.5-1.3-1.3-1.3H3.4C2.5 8 2 8.5 2 9.3v7.4c0 .8.5 1.3 1.3 1.3h17.4c.8 0 1.3-.5 1.3-1.3V9.3zM21 17H3V9h18v8z" fill-rule="nonzero"/><rect x="3" y="5" width="4" height="2" rx=".5"/><rect x="8" y="5" width="4" height="2" rx=".5"/><rect x="13" y="5" width="4" height="2" rx=".5"/>
      </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>
    `,
      ...tabsBlock,
    });
};

export default (dc, label, type) => {
  const defaultType = dc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  const {
    attrTabs,
    attrTab,
    attrTabContent,
    classTabActive,
    selectorTab,
    tabsProps,
    template,
    attrTabContainer,
  } = constants;

  dc.addType(type, {
    model: defaultModel.extend(
      {
        defaults: {
          ...defaultModel.prototype.defaults,
          name: label,
          "attr-tabs": attrTabs,
          "attr-tab": attrTab,
          "attr-tab-content": attrTabContent,
          "class-tab-active": classTabActive,
          "selector-tab": selectorTab,
          script() {
            var i;
            var el = this;
            var attrTabs = "[" + "{[ attr-tabs ]}" + "]";
            var attrTab = "[" + "{[ attr-tab ]}" + "]";
            var attrTabContent = "[" + "{[ attr-tab-content ]}" + "]";
            var classTabActive = "{[ class-tab-active ]}";
            var selectorTab = "{[ selector-tab ]}";
            var body = document.body;
            var matches =
              body.matchesSelector ||
              body.webkitMatchesSelector ||
              body.mozMatchesSelector ||
              body.msMatchesSelector;

            var hideContents = function () {
              var tabContents = el.querySelectorAll(attrTabContent) || [];
              for (i = 0; i < tabContents.length; i++) {
                tabContents[i].style.display = "none";
              }
            };

            var activeTab = function (tabEl) {
              var tabs = el.querySelectorAll(attrTab) || [];

              for (i = 0; i < tabs.length; i++) {
                var tab = tabs[i];
                var newClass = tab.className.replace(classTabActive, "").trim();
                tab.className = newClass;
              }

              hideContents();
              tabEl.className += " " + classTabActive;
              var tabContSelector = tabEl.getAttribute(selectorTab);
              var tabContent = el.querySelector(tabContSelector);
              tabContent && (tabContent.style.display = "");
            };

            var tabToActive = el.querySelector("." + classTabActive + attrTab);
            tabToActive = tabToActive || el.querySelector(attrTab);
            tabToActive && activeTab(tabToActive);

            el.addEventListener("click", function (e) {
              var target = e.target;
              // Handling LinkBox Component
              const compatibleElements = ["A"];
              if (!compatibleElements.includes(target.tagName.toUpperCase())) {
                target = target.closest("A");
              }
              matches.call(target, attrTab) && activeTab(target);
            });
          },
          ...tabsProps,
        },

        init() {
          const attrs = this.getAttributes();
          attrs[attrTabs] = 1;
          this.setAttributes(attrs);
        },
      },
      {
        isComponent(el) {
          if (el.hasAttribute && el.hasAttribute(attrTabs)) {
            return { type };
          }
        },
      }
    ),

    view: defaultView.extend({
      init() {
        const comps = this.model.components();
        !comps.length && comps.add(template);
      },

      onRender() {
        const tabContainer = this.model.find(`[${attrTabContainer}]`)[0];
        tabContainer &&
          tabContainer.components().each((tab) => {
            tabContainer.onAdd(tab);
          });
      },
    }),
  });
};
