"use strict";
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const assert = require("assert");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const dynamic = require("@vanilla-extract/dynamic");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
const styles_lib_components_Tabs_Tab_cjs = require("./Tab.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
const styles_lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
const styles_lib_components_Tabs_Tabs_css_cjs = require("./Tabs.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
const tabLinePositionDefault = { left: 0, width: 0 };
const getActiveTabLinePosition = (button) => {
  if (!button) {
    return tabLinePositionDefault;
  }
  const computedStyle = getComputedStyle(button);
  const elWidth = button.getBoundingClientRect().width;
  const paddingLeft = parseFloat(computedStyle.paddingLeft);
  const paddingRight = parseFloat(computedStyle.paddingRight);
  const width = elWidth - paddingLeft - paddingRight;
  return { left: button.offsetLeft + paddingLeft, width };
};
const Tabs = (props) => {
  const tabsContext = React.useContext(styles_lib_components_Tabs_Tab_cjs.TabsContext);
  const tabsRef = React.useRef(null);
  const [activeTabPosition, setActiveTabPosition] = React.useState(
    tabLinePositionDefault
  );
  const {
    children,
    label,
    data,
    align = "left",
    gutter,
    reserveHitArea = false,
    divider = "minimal",
    ...restProps
  } = props;
  assert__default.default(
    tabsContext !== null,
    "Tabs must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
  );
  if (!tabsContext) {
    throw new Error("Tabs rendered outside TabsProvider");
  }
  const { dispatch, a11y, selectedIndex, selectedItem } = tabsContext;
  const tabItems = [];
  const childTabs = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children);
  const tabs = childTabs.map((tab, index) => {
    assert__default.default(
      // @ts-expect-error
      typeof tab === "object" && tab.type.__isTab__,
      "Only Tab elements can be direct children of a Tabs"
    );
    tabItems.push(tab.props.item ?? index);
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Tabs_Tab_cjs.TabListContext.Provider,
      {
        value: {
          tabListItemIndex: index,
          scrollContainer: tabsRef.current,
          isLast: childTabs.length === index + 1
        },
        children: tab
      },
      index
    );
  });
  React.useEffect(() => {
    dispatch({ type: styles_lib_components_Tabs_Tab_cjs.TAB_LIST_UPDATED, tabItems });
  }, [tabItems.join(), dispatch]);
  const {
    space: { grid, space }
  } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
  const [showMask, setShowMask] = React.useState(true);
  const updateMask = React.useCallback(() => {
    if (!tabsRef.current) {
      return;
    }
    setShowMask(
      tabsRef.current.scrollWidth - tabsRef.current.offsetWidth - tabsRef.current.scrollLeft > grid * space.small
    );
  }, [tabsRef, setShowMask, grid, space]);
  useIsomorphicLayoutEffect(() => {
    updateMask();
    window.addEventListener("resize", updateMask);
    return () => window.removeEventListener("resize", updateMask);
  }, [updateMask]);
  const selectedTabIndex = typeof selectedItem !== "undefined" ? tabItems.indexOf(selectedItem) : selectedIndex;
  const selectedTabButtonEl = tabsContext.tabButtonElements[selectedTabIndex.toString()];
  useIsomorphicLayoutEffect(() => {
    setActiveTabPosition(getActiveTabLinePosition(selectedTabButtonEl));
  }, [selectedTabButtonEl]);
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      className: reserveHitArea ? void 0 : styles_lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", "medium"),
      children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
        styles_lib_components_Box_Box_cjs.Box,
        {
          ref: tabsRef,
          className: [
            styles_lib_components_Tabs_Tabs_css_cjs.scroll,
            styles_lib_components_Tabs_Tabs_css_cjs.nowrap,
            showMask ? styles_lib_components_Tabs_Tabs_css_cjs.mask : null
          ],
          display: "flex",
          onScroll: updateMask,
          flexWrap: "nowrap",
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Box_Box_cjs.Box,
              {
                display: "flex",
                className: align === "center" ? styles_lib_components_Tabs_Tabs_css_cjs.marginAuto : void 0,
                paddingX: gutter,
                flexWrap: "nowrap",
                position: "relative",
                zIndex: 1,
                children: /* @__PURE__ */ jsxRuntime.jsxs(
                  styles_lib_components_Box_Box_cjs.Box,
                  {
                    ...a11y.tabListProps({ label }),
                    display: "flex",
                    ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
                    flexWrap: "nowrap",
                    position: "relative",
                    children: [
                      tabs,
                      divider === "minimal" ? /* @__PURE__ */ jsxRuntime.jsx(
                        styles_lib_components_Box_Box_cjs.Box,
                        {
                          position: "absolute",
                          bottom: 0,
                          left: 0,
                          right: 0,
                          className: styles_lib_components_Tabs_Tabs_css_cjs.divider,
                          children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
                        }
                      ) : null,
                      selectedTabButtonEl ? /* @__PURE__ */ jsxRuntime.jsx(
                        styles_lib_components_Box_Box_cjs.Box,
                        {
                          component: "span",
                          position: "absolute",
                          display: "block",
                          left: 0,
                          right: 0,
                          bottom: 0,
                          background: "formAccent",
                          pointerEvents: "none",
                          className: [
                            styles_lib_components_Tabs_Tabs_css_cjs.tabUnderline,
                            styles_lib_components_Tabs_Tabs_css_cjs.tabUnderlineActiveDarkMode
                          ],
                          style: dynamic.assignInlineVars({
                            [styles_lib_components_Tabs_Tabs_css_cjs.underlineLeft]: activeTabPosition.left.toString(),
                            [styles_lib_components_Tabs_Tabs_css_cjs.underlineWidth]: activeTabPosition.width.toString()
                          })
                        }
                      ) : null
                    ]
                  }
                )
              }
            ),
            divider === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Box_Box_cjs.Box,
              {
                position: "absolute",
                bottom: 0,
                left: 0,
                right: 0,
                className: styles_lib_components_Tabs_Tabs_css_cjs.divider,
                children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Divider_Divider_cjs.Divider, {})
              }
            ) : null
          ]
        }
      ) })
    }
  ) });
};
exports.Tabs = Tabs;
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
