import { a as IconSize } from "./constants2.js";
import { t as usePseudoClasses } from "./usePseudoClasses.js";
import { t as palette } from "./palette.js";
import { t as Icon_default } from "./Icon.js";
import { t as LazyIcon_default } from "./LazyIcon.js";
import { t as isComponent } from "./component.js";
import { t as useIsVisible } from "./useIsVisible.js";
import { t as ChevronLeft_default } from "./ChevronLeft.js";
import { t as ChevronRight_default } from "./ChevronRight.js";
import { t as useRovingFocus } from "./useRovingFocus.js";
import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/Tabs/TabList/styles.module.scss";
var Tab = (props) => {
	return /* @__PURE__ */ jsx(Fragment, { children: props.children ?? null });
};
var Tab_default = Tab;
var TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
	const buttonRef = React.useRef(null);
	const { isHovered } = usePseudoClasses(buttonRef);
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		ref: buttonRef,
		className: styles["tab-list__button"],
		onClick,
		"aria-label": ariaLabel,
		style: { backgroundColor },
		children: direction === "left" ? /* @__PURE__ */ jsx(Icon_default, {
			color: "var(--color-action-graphics-onlight)",
			isHovered,
			svgIcon: ChevronLeft_default,
			size: IconSize.XSmall
		}) : /* @__PURE__ */ jsx(Icon_default, {
			color: "var(--color-action-graphics-onlight)",
			isHovered,
			svgIcon: ChevronRight_default,
			size: IconSize.XSmall
		})
	});
};
var TabChevron_default = TabChevron;
var TabItem = (props) => {
	const isSelected = props.index === props.selectedTab;
	const { title, onTabClick, icon, testId } = props.tabProps;
	const handleClick = () => {
		if (onTabClick) onTabClick(props.index);
		props.onTabListClick(props.index);
		scrollToTab(props.index);
	};
	const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
		[styles["tab-list__tab--selected"]]: isSelected,
		[styles["tab-list__tab--not-selected"]]: !isSelected
	});
	const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];
	const scrollToTab = (index) => {
		const currentRef$1 = props.tabRefs.current && props.tabRefs.current[index];
		if (currentRef$1?.current?.scrollIntoView) currentRef$1?.current?.scrollIntoView({
			behavior: "smooth",
			inline: "nearest",
			block: "nearest"
		});
	};
	const itemRef = useRef(null);
	useEffect(() => {
		if (isSelected && props.tabListVisible) scrollToTab(props.index);
	}, [isSelected]);
	return /* @__PURE__ */ jsx("li", {
		role: "presentation",
		ref: itemRef,
		children: /* @__PURE__ */ jsx("button", {
			role: "tab",
			"aria-selected": isSelected,
			onClick: handleClick,
			className: tabButtonClasses,
			"data-testid": testId,
			ref: currentRef,
			children: /* @__PURE__ */ jsxs("span", {
				className: styles["tab-list__tab__title-and-icon"],
				children: [icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
					iconName: icon,
					size: IconSize.XSmall,
					color: isSelected ? palette[`black`] : palette["blueberry500"]
				}) : /* @__PURE__ */ jsx(Icon_default, {
					svgIcon: icon,
					size: IconSize.XSmall,
					color: isSelected ? palette[`black`] : palette["blueberry500"]
				})), title]
			})
		})
	});
};
var TabItem_default = TabItem;
var TabList = (props) => {
	const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;
	const listRef = useRef(null);
	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
	useRovingFocus(onTabListClick, tabRefs, listRef, true);
	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
	const getBackgroundColor = (onColor$1) => {
		switch (onColor$1) {
			case "onwhite": return "var(--color-base-background-white)";
			case "onblueberry": return "var(--color-base-background-blueberry)";
			case "onneutral": return "var(--color-base-background-neutral)";
		}
	};
	const firstTab = tabRefs.current && tabRefs.current[0];
	const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];
	const firstTabVisible = useIsVisible(firstTab);
	const lastTabVisible = useIsVisible(lastTab);
	const tabListVisible = useIsVisible(listRef);
	const shouldShowFadeStart = () => {
		return !firstTabVisible;
	};
	const shouldShowFadeEnd = () => {
		return !lastTabVisible;
	};
	const scrollInList = (direction) => {
		if (listRef.current) {
			const listWidth = listRef.current.clientWidth;
			const listScrollLeft = listRef.current.scrollLeft;
			const maxScrollLeft = listRef.current.scrollWidth - listWidth;
			if (direction === "right" && !lastTabVisible) {
				const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);
				listRef.current.scrollBy({
					left: scrollAmount,
					behavior: "smooth"
				});
			} else if (direction === "left" && !firstTabVisible) {
				const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);
				listRef.current.scrollBy({
					left: scrollAmount,
					behavior: "smooth"
				});
			}
		}
	};
	return /* @__PURE__ */ jsxs("div", {
		className: styles["tab-list-wrapper"],
		children: [
			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
				className: classNames(styles["tab-list__start-wrapper"]),
				children: [/* @__PURE__ */ jsx(TabChevron_default, {
					onClick: () => scrollInList("left"),
					direction: "left",
					backgroundColor: `${getBackgroundColor(onColor)}`,
					ariaLabel: ariaLabelLeftButton
				}), /* @__PURE__ */ jsx("div", {
					className: classNames(styles["tab-list__fade-start"]),
					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
				})]
			}),
			/* @__PURE__ */ jsx("ul", {
				className: tablistClasses,
				ref: listRef,
				role: "tablist",
				"aria-orientation": "horizontal",
				children: React.Children.map(children, (child, index) => {
					if (isComponent(child, Tab_default)) return /* @__PURE__ */ jsx(TabItem_default, {
						tabRefs,
						tabListVisible,
						index,
						selectedTab,
						onTabListClick,
						tabProps: child.props,
						color
					}, child.props.title);
					return null;
				})
			}),
			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
				className: classNames(styles["tab-list__end-wrapper"]),
				children: [/* @__PURE__ */ jsx("div", {
					className: classNames(styles["tab-list__fade-end"]),
					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
				}), /* @__PURE__ */ jsx(TabChevron_default, {
					onClick: () => scrollInList("right"),
					direction: "right",
					backgroundColor: `${getBackgroundColor(onColor)}`,
					ariaLabel: ariaLabelRightButton
				})]
			}),
			/* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
		]
	});
};
var TabList_default$1 = TabList;
export { Tab_default as n, TabList_default$1 as t };

//# sourceMappingURL=TabList.js.map