"use strict";
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const assert = require("assert");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.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 useSpace = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().space;
const TAB_BUTTON_RIGHT = 0;
const TAB_BUTTON_LEFT = 1;
const TAB_BUTTON_HOME = 2;
const TAB_BUTTON_END = 3;
const TAB_BUTTON_TAB = 4;
const TAB_BUTTON_ENTER = 5;
const TAB_BUTTON_SPACE = 6;
const TAB_BUTTON_CLICK = 7;
const TAB_LIST_UPDATED = 8;
const TAB_LIST_FOCUSED = 9;
const TAB_PANELS_UPDATED = 10;
const TAB_BUTTON_REGISTER = 11;
const getTabLabelId = (uniqueId, index) => `${uniqueId}_${index + 1}_label`;
const getPanelId = (uniqueId, index) => `${uniqueId}_${index + 1}_panel`;
const tabA11y = ({ uniqueId }) => ({
  tabListProps: ({ label }) => ({
    role: "tablist",
    "aria-orientation": "horizontal",
    "aria-label": label
  }),
  tabProps: ({ tabIndex, isSelected }) => ({
    role: "tab",
    tabIndex: isSelected ? void 0 : -1,
    "aria-selected": isSelected,
    "aria-controls": getPanelId(uniqueId, tabIndex),
    id: `${uniqueId}_${tabIndex + 1}`
  }),
  tabLabelProps: ({ tabIndex }) => ({
    id: getTabLabelId(uniqueId, tabIndex)
  }),
  tabPanelProps: ({ panelIndex, isSelected }) => ({
    role: "tabpanel",
    "aria-labelledby": getTabLabelId(uniqueId, panelIndex),
    "aria-hidden": isSelected ? void 0 : true,
    id: getPanelId(uniqueId, panelIndex),
    tabIndex: isSelected ? 0 : void 0
  })
});
const TabsContext = React.createContext(null);
const TabsProvider = ({
  children,
  onChange,
  id,
  selectedItem
}) => {
  const [tabsState, dispatch] = React.useReducer(
    (state, action) => {
      switch (action.type) {
        case TAB_BUTTON_LEFT: {
          return {
            ...state,
            focusedTabIndex: styles_lib_components_Autosuggest_Autosuggest_cjs.getNextIndex(
              -1,
              state.focusedTabIndex,
              state.tabItems.length
            )
          };
        }
        case TAB_BUTTON_RIGHT: {
          return {
            ...state,
            focusedTabIndex: styles_lib_components_Autosuggest_Autosuggest_cjs.getNextIndex(
              1,
              state.focusedTabIndex,
              state.tabItems.length
            )
          };
        }
        case TAB_BUTTON_HOME: {
          return {
            ...state,
            focusedTabIndex: 0
          };
        }
        case TAB_BUTTON_END: {
          return {
            ...state,
            focusedTabIndex: state.tabItems.length - 1
          };
        }
        case TAB_BUTTON_TAB: {
          return {
            ...state,
            focusedTabIndex: null
          };
        }
        case TAB_BUTTON_ENTER:
        case TAB_BUTTON_SPACE:
        case TAB_BUTTON_CLICK: {
          return {
            ...state,
            focusedTabIndex: action.value,
            selectedIndex: action.value
          };
        }
        case TAB_BUTTON_REGISTER: {
          return {
            ...state,
            tabButtonElements: {
              ...state.tabButtonElements,
              [action.tabListItemIndex.toString()]: action.tabEl
            }
          };
        }
        case TAB_LIST_FOCUSED: {
          return {
            ...state,
            focusedTabIndex: action.value || 0
          };
        }
        case TAB_LIST_UPDATED: {
          return {
            ...state,
            tabItems: action.tabItems,
            selectedIndex: 0
          };
        }
        case TAB_PANELS_UPDATED: {
          return {
            ...state,
            panels: action.panels
          };
        }
        default:
          return state;
      }
    },
    {
      selectedIndex: 0,
      focusedTabIndex: null,
      tabItems: [],
      panels: [],
      tabButtonElements: {}
    }
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    TabsContext.Provider,
    {
      value: {
        ...tabsState,
        selectedIndex: typeof selectedItem !== "undefined" ? tabsState.tabItems.indexOf(selectedItem) : tabsState.selectedIndex,
        selectedItem,
        dispatch,
        a11y: tabA11y({ uniqueId: id }),
        onChange
      },
      children
    }
  );
};
const TabListContext = React.createContext(null);
const paddingX = "small";
const Tab = ({
  children,
  data,
  badge,
  icon,
  item,
  ...restProps
}) => {
  const tabsContext = React.useContext(TabsContext);
  const tabListContext = React.useContext(TabListContext);
  const tabRef = React.useRef(null);
  assert__default.default(
    tabListContext !== null,
    "A Tab must be rendered as a child of Tabs. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tab"
  );
  assert__default.default(
    // @ts-expect-error
    !badge || badge.type.__isBadge__,
    `Tab badge prop can only be an instance of Badge. e.g. <Tab badge={<Badge>New</Badge>}>`
  );
  assert__default.default(
    !badge || badge.props.bleedY === void 0,
    "Badge elements cannot set the 'bleedY' prop when passed to a Tab component"
  );
  assert__default.default(
    !icon || icon.props.size === void 0 && icon.props.tone === void 0,
    "Icons cannot set the 'size' or 'tone' prop when passed to a Tab component"
  );
  if (!tabListContext) {
    throw new Error("Tab rendered outside Tabs context");
  }
  if (!tabsContext) {
    throw new Error("Tab rendered outside TabsProvider");
  }
  const {
    focusedTabIndex,
    selectedIndex,
    selectedItem,
    dispatch,
    a11y,
    onChange
  } = tabsContext;
  const { tabListItemIndex, scrollContainer, isLast } = tabListContext;
  const isSelected = selectedIndex > -1 ? selectedIndex === tabListItemIndex : selectedItem === item;
  const isFocused = focusedTabIndex === tabListItemIndex;
  const { grid, space } = useSpace();
  React.useEffect(() => {
    if (tabRef.current && isFocused) {
      tabRef.current.focus();
    }
  }, [isFocused]);
  const firstRenderRef = React.useRef(true);
  const isMobile = styles_lib_components_Autosuggest_Autosuggest_cjs.useResponsiveValue()({
    mobile: true,
    tablet: false
  });
  React.useEffect(() => {
    if (!tabRef.current || !scrollContainer) {
      return;
    }
    if (isSelected || isFocused) {
      if (isMobile) {
        styles_lib_components_Autosuggest_Autosuggest_cjs.smoothScroll(tabRef.current, {
          scrollContainer,
          direction: "horizontal",
          offset: space[paddingX] * grid * 3,
          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
        });
      } else {
        styles_lib_components_Autosuggest_Autosuggest_cjs.smoothScrollIntoView(tabRef.current, {
          scrollContainer,
          direction: "horizontal",
          offset: space[paddingX] * grid * 6,
          ...firstRenderRef.current ? { duration: 0 } : { speed: 0.7 }
        });
      }
    }
    firstRenderRef.current = false;
  }, [isSelected, isFocused, scrollContainer, space, grid, isMobile]);
  React.useEffect(() => {
    if (tabRef.current) {
      dispatch({
        type: TAB_BUTTON_REGISTER,
        tabEl: tabRef.current,
        tabListItemIndex
      });
    }
  }, [dispatch, tabListItemIndex]);
  const onKeyUp = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Tab") {
      return;
    }
    if (onChange && (targetKey === "Enter" || targetKey === " ")) {
      onChange(tabListItemIndex, item);
    }
    const action = {
      ArrowRight: { type: TAB_BUTTON_RIGHT },
      ArrowLeft: { type: TAB_BUTTON_LEFT },
      Home: { type: TAB_BUTTON_HOME },
      End: { type: TAB_BUTTON_END },
      Enter: { type: TAB_BUTTON_ENTER, value: tabListItemIndex },
      " ": { type: TAB_BUTTON_SPACE, value: tabListItemIndex }
    };
    if (action[targetKey]) {
      dispatch(action[targetKey]);
    }
  };
  const onKeyDown = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Tab" && focusedTabIndex !== null) {
      dispatch({ type: TAB_BUTTON_TAB });
      return;
    }
    const isArrowPress = targetKey.indexOf("Arrow") === 0;
    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
    if (isArrowPress || isActionKeyPress) {
      event.preventDefault();
    }
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: "button",
      type: "button",
      ...a11y.tabProps({ tabIndex: tabListItemIndex, isSelected }),
      ref: tabRef,
      onKeyUp,
      onKeyDown,
      onClick: (event) => {
        event.stopPropagation();
        event.preventDefault();
        if (onChange) {
          onChange(tabListItemIndex, item);
        }
        dispatch({ type: TAB_BUTTON_CLICK, value: tabListItemIndex });
      },
      onFocus: isSelected ? () => dispatch({
        type: TAB_LIST_FOCUSED,
        value: tabListItemIndex
      }) : void 0,
      display: "flex",
      alignItems: "center",
      textAlign: "left",
      borderRadius: "standard",
      cursor: "pointer",
      outline: "none",
      position: "relative",
      zIndex: 1,
      paddingLeft: tabListItemIndex > 0 ? paddingX : void 0,
      paddingRight: !isLast ? paddingX : void 0,
      paddingY: "medium",
      className: styles_lib_components_Tabs_Tabs_css_cjs.tab,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "span",
            display: "block",
            position: "absolute",
            "aria-hidden": true,
            transition: "fast",
            opacity: isSelected ? 0 : void 0,
            className: icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0,
            children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: "secondary", icon, children })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "span",
            display: "block",
            position: "absolute",
            "aria-hidden": true,
            transition: "fast",
            opacity: 0,
            className: [
              !isSelected ? styles_lib_components_Tabs_Tabs_css_cjs.hoveredTab : void 0,
              icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0
            ],
            children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { icon, children })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "span",
            display: "block",
            transition: "fast",
            opacity: !isSelected ? 0 : void 0,
            className: icon ? styles_lib_components_Tabs_Tabs_css_cjs.cropToIconX : void 0,
            children: /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Accordion_AccordionItem_cjs.Text,
              {
                ...a11y.tabLabelProps({ tabIndex: tabListItemIndex }),
                tone: "formAccent",
                icon,
                children
              }
            )
          }
        ),
        badge ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", paddingLeft: "xsmall", children: React.cloneElement(badge, { bleedY: true }) }) : null,
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
          {
            component: "span",
            zIndex: 1,
            boxShadow: "outlineFocus",
            borderRadius: "standard",
            className: styles_lib_components_Tabs_Tabs_css_cjs.tabFocusRing,
            visible: false,
            transition: "fast",
            onlyVisibleForKeyboardNavigation: true
          }
        )
      ]
    }
  );
};
Tab.__isTab__ = true;
exports.TAB_LIST_UPDATED = TAB_LIST_UPDATED;
exports.TAB_PANELS_UPDATED = TAB_PANELS_UPDATED;
exports.Tab = Tab;
exports.TabListContext = TabListContext;
exports.TabsContext = TabsContext;
exports.TabsProvider = TabsProvider;
exports.useSpace = useSpace;
