'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const index_module = require('./index.module-f8c8495f.js');
const utils = require('./utils-6847bc06.js');
const reRender = require('./re-render-72a0ef45.js');
const useChildElements = require('./useChildElements-041127d7.js');

const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
  // Vertical padding for top & bottom placement, horizontal for left & right.
  const padding = !placement || placement === "top" || placement === "bottom"
    ? "var(--sl-spacing-x-large) 0;"
    : "0 var(--sl-spacing-xx-large);";
  const vanillaStyle = `
    sl-tab-panel::part(base) {
      padding: ${padding};
    }

    sl-tab::part(base) {
      color: ${textColor};
      font-family: var(--sqm-primary-font);
    }



    sl-tab-group::part(tabs) {
      border-bottom: 2px solid var(--sqm-border-color);
      font-family: var(--sqm-primary-font);
    }
  `;
  return (index.h(index.Host, null,
    index.h("style", { type: "text/css" }, vanillaStyle),
    index.h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
      const slotName = tab.getAttribute("slot");
      if (tab.tagName === "RAISINS-PLOP-TARGET") {
        return (index.h("sl-tab", { slot: "nav" },
          index.h("div", { style: { marginTop: "10px" } },
            index.h("slot", { name: slotName }))));
      }
      return [
        index.h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
        index.h("sl-tab-panel", { name: slotName },
          index.h("slot", { name: slotName })),
      ];
    })),
    index.h("div", { style: { display: "none" } },
      index.h("slot", null))));
};

const REVEAL_EVENT = "sq:reveal";
function useTabs() {
  const rawTabs = useChildElements.useChildElements();
  const host = index_module._();
  const tick = reRender.useRerenderListener();
  const tabs = domContextHooks_module.useMemo(() => rawTabs
    .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
    .map((tab, i) => {
    if (tab.tagName === "RAISINS-PLOP-TARGET") {
      const plopTab = tab;
      plopTab.style.position = "absolute";
      plopTab.style.left = "6px";
      const plopTarget = tab.firstElementChild
        .childNodes[1];
      plopTarget.innerHTML = "＋";
      plopTarget.style.lineHeight = "20px";
    }
    tab.setAttribute("slot", "tab-" + i);
    // set id as targets for scroll component
    tab.setAttribute("id", "tab-" + i);
    return tab;
  }), [rawTabs, tick]);
  domContextHooks_module.useEffect(() => {
    const listener = (e) => {
      var _a;
      const target = e.target;
      // Prevents recursively nested components from sending requests up all the way
      e.stopPropagation();
      if (!target)
        return;
      const tabsComponent = target.closest("sqm-tabs");
      if (!host.contains(target) || !tabsComponent)
        return;
      const targetTab = target.closest("sqm-tab");
      const tabGroup = tabsComponent.shadowRoot.querySelector("sl-tab-group");
      (_a = tabGroup) === null || _a === void 0 ? void 0 : _a.show(targetTab.id);
    };
    host.addEventListener(REVEAL_EVENT, listener);
    return () => {
      host.removeEventListener(REVEAL_EVENT, listener);
    };
  }, []);
  return { content: { tabs } };
}

const Tabs = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const { content } = useTabs();
    const { placement, textColor } = utils.getProps(this);
    return (index.h(TabsView, { placement: placement, content: content, textColor: textColor }, index.h("slot", null)));
  }
};

exports.sqm_tabs = Tabs;
