import { h, c as Host, r as registerInstance } from './index-38ad4957.js';
import { u as useMemo, f as useEffect, n as h$1 } from './dom-context-hooks.module-50442785.js';
import { _ } from './index.module-b23fdad8.js';
import { g as getProps } from './utils-334c1e34.js';
import { u as useRerenderListener } from './re-render-f30aeb6b.js';
import { u as useChildElements } from './useChildElements-9bccfb72.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 (h(Host, null,
    h("style", { type: "text/css" }, vanillaStyle),
    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
      const slotName = tab.getAttribute("slot");
      if (tab.tagName === "RAISINS-PLOP-TARGET") {
        return (h("sl-tab", { slot: "nav" },
          h("div", { style: { marginTop: "10px" } },
            h("slot", { name: slotName }))));
      }
      return [
        h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
        h("sl-tab-panel", { name: slotName },
          h("slot", { name: slotName })),
      ];
    })),
    h("div", { style: { display: "none" } },
      h("slot", null))));
};

const REVEAL_EVENT = "sq:reveal";
function useTabs() {
  const rawTabs = useChildElements();
  const host = _();
  const tick = useRerenderListener();
  const tabs = 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]);
  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) {
    registerInstance(this, hostRef);
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const { content } = useTabs();
    const { placement, textColor } = getProps(this);
    return (h(TabsView, { placement: placement, content: content, textColor: textColor }, h("slot", null)));
  }
};

export { Tabs as sqm_tabs };
