"use client";
import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
import { TabGroup, TabPanel, TabPanels, Tab, TabList } from "@headlessui/react";
import { motion } from "motion/react";
import { forwardRef, useContext, createContext, useRef, Fragment, useId } from "react";
import flattenChildren from "react-keyed-flatten-children";
import { ExperimentalDivider } from "./Divider.js";
import { ExperimentalIcon } from "./Icon.js";
import { ExperimentalTransition } from "./Transition.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalTabSetRoot = forwardRef(
  ({
    size,
    fullWidth,
    selectedIndex,
    defaultIndex = 0,
    onChange,
    className,
    style,
    children,
    ...props
  }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("tab-set", { size, fullWidth });
    return /* @__PURE__ */ jsxs(
      TabGroup,
      {
        ref,
        selectedIndex,
        defaultIndex,
        onChange,
        className: classNames(["gds-tab-set", className]),
        ...getCSSPropsAttributes("tab-set", { size, fullWidth }, style),
        ...polyfillAttributes,
        ...props,
        children: [
          polyfillElement,
          children
        ]
      }
    );
  }
);
ExperimentalTabSetRoot.displayName = "ExperimentalTabSet";
const ExperimentalTabSetTabs = forwardRef(
  ({ className, children, ...props }, ref) => {
    const id = useId();
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: classNames([
          `gradient-mask-x overflow-x-auto overflow-y-clip whitespace-nowrap scrollbar-none
          -:@prop-size-small/tab-set:h-8
          -:@prop-size-medium/tab-set:h-10`,
          className
        ]),
        children: /* @__PURE__ */ jsx(
          TabList,
          {
            ref,
            className: `
            group/tabs grid h-full min-w-min ${/* Ensure the divider spans the whole scroll area */
            ""}
            grid-flow-col gap-1
            @prop-size-small/tab-set:text-p12
            @prop-size-medium/tab-set:text-h16
            @prop-full-width-false/tab-set:auto-cols-max
            @prop-full-width-true/tab-set:auto-cols-[minmax(theme(spacing.30),1fr)]
          `,
            ...props,
            children: ({ selectedIndex }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
              /* @__PURE__ */ jsx(ExperimentalDivider, { className: "absolute inset-x-0 bottom-0" }),
              /* @__PURE__ */ jsx(
                motion.span,
                {
                  layoutId: `${id}-underline`,
                  transition: { duration: 0.3 },
                  className: `
                  absolute inset-x-0 bottom-0 col-span-1 col-start-[var(--selected-index)] h-px bg-purple transition-opacity
                  group-has-focus-visible/tabs:!opacity-0
                `,
                  style: { ["--selected-index"]: `${selectedIndex + 1}` }
                }
              ),
              children
            ] })
          }
        )
      }
    );
  }
);
ExperimentalTabSetTabs.displayName = "ExperimentalTabSet.Tabs";
const ExperimentalTabSetTab = forwardRef(
  ({ iconBefore, iconAfter, disabled = false, className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      Tab,
      {
        ref,
        disabled,
        className: classNames([
          `flex items-center justify-center rounded-8 text-white/64 -outline-offset-1 transition
          hocus-visible:text-white
          data-[selected]:text-white
          disabled:text-white/32
          nested-icon:disabled:opacity-32
          nested-icon:disabled:grayscale
          nested-icon:disabled:prop-color-white
          @prop-size-small/tab-set:px-2
          @prop-size-small/tab-set:nested-icon:default-size-3.5
          @prop-size-medium/tab-set:px-4
          @prop-size-medium/tab-set:nested-icon:default-size-4.5`,
          className
        ]),
        ...props,
        children: [
          iconBefore ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "mx-0.5", children: iconBefore }) : null,
          /* @__PURE__ */ jsx("span", { className: "truncate px-1", children }),
          iconAfter ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "mx-0.5", children: iconAfter }) : null
        ]
      }
    );
  }
);
ExperimentalTabSetTab.displayName = "ExperimentalTabSet.Tab";
const ExperimentalTabSetPanels = forwardRef(
  ({ transition = true, className, children, ...props }, ref) => {
    const previousSelectedIndex = useRef(0);
    const direction = useRef("left");
    return /* @__PURE__ */ jsx(TabPanels, { as: Fragment, children: ({ selectedIndex }) => {
      if (selectedIndex !== previousSelectedIndex.current) {
        direction.current = selectedIndex > previousSelectedIndex.current ? "left" : "right";
        previousSelectedIndex.current = selectedIndex;
      }
      return /* @__PURE__ */ jsx(
        ExperimentalTransition,
        {
          ref,
          duration: transition ? 300 : 0,
          animateSize: transition && typeof transition === "object" ? transition.animateSize : void 0,
          "data-direction": direction.current,
          className: classNames([
            `data-[direction=right]:[--gds-transition-enter-translate-x:-16px]
                data-[direction=left]:[--gds-transition-enter-translate-x:16px]
                data-[direction=left]:[--gds-transition-exit-translate-x:-16px]
                data-[direction=right]:[--gds-transition-exit-translate-x:16px]`,
            className
          ]),
          ...props,
          children: /* @__PURE__ */ jsx("div", { children: flattenChildren(children).map((child, childIndex) => /* @__PURE__ */ jsx(
            ExperimentalTabSetPanelContext.Provider,
            {
              value: { index: childIndex, selectedIndex },
              children: child
            },
            childIndex
          )) }, selectedIndex)
        }
      );
    } });
  }
);
ExperimentalTabSetPanels.displayName = "ExperimentalTabSet.Panels";
const ExperimentalTabSetPanelContext = createContext({
  index: 0,
  selectedIndex: 0
});
const ExperimentalTabSetPanel = forwardRef(
  ({ className, children, ...props }, ref) => {
    const { index, selectedIndex } = useContext(ExperimentalTabSetPanelContext);
    const selected = index === selectedIndex;
    return /* @__PURE__ */ jsx(TabPanel, { ref, static: true, className: classNames([selected ? "outline-none" : "sr-only", className]), ...props, children: selected ? children : null });
  }
);
ExperimentalTabSetPanel.displayName = "ExperimentalTabSet.Panel";
export {
  ExperimentalTabSetPanel,
  ExperimentalTabSetPanels,
  ExperimentalTabSetRoot,
  ExperimentalTabSetTab,
  ExperimentalTabSetTabs
};
