import { jsxs, jsx } from "react/jsx-runtime";
import { createContext, useContext } from "react";
import assert from "assert";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { Overlay } from "../Accordion/AccordionItem.mjs";
import { TabsContext } from "./Tab.mjs";
import { tabPanel, tabPanelFocusRing } from "./Tabs.css.mjs";
const TabPanelsContext = createContext(
  null
);
const TabPanel = ({
  children,
  data,
  item,
  ...restProps
}) => {
  const tabsContext = useContext(TabsContext);
  const tabPanelsContext = useContext(TabPanelsContext);
  assert(
    tabsContext !== null,
    "A TabPanel 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 (!tabPanelsContext) {
    throw new Error("TabPanel rendered outside TabPanels");
  }
  if (!tabsContext) {
    throw new Error("TabPanel rendered outside TabsProvider");
  }
  const { a11y, selectedIndex, selectedItem } = tabsContext;
  const { panelIndex, renderInactive } = tabPanelsContext;
  const isSelected = selectedIndex > -1 ? panelIndex === selectedIndex : selectedItem === item;
  return /* @__PURE__ */ jsxs(
    Box,
    {
      ...a11y.tabPanelProps({ panelIndex, isSelected }),
      display: isSelected ? void 0 : "none",
      position: "relative",
      outline: "none",
      className: tabPanel,
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        isSelected || renderInactive ? children : void 0,
        /* @__PURE__ */ jsx(
          Overlay,
          {
            zIndex: 1,
            boxShadow: "outlineFocus",
            borderRadius: "large",
            className: tabPanelFocusRing,
            onlyVisibleForKeyboardNavigation: true
          }
        )
      ]
    }
  );
};
TabPanel.displayName = "TabPanel";
TabPanel.__isTabPanel__ = true;
export {
  TabPanel,
  TabPanelsContext
};
