import { s as LanguageLocales } from "../../constants2.js";
import { n as useLanguage } from "../../useLanguage.js";
import { n as Tab_default, t as TabList_default } from "../../TabList.js";
import { t as TabPanel_default } from "../../TabPanel.js";
import classNames from "classnames";
import React, { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import designsystemlayout from "../../scss/layout.module.scss";
import styles from "./styles.module.scss";
var HN_Designsystem_Tabs_en_GB_default = {
	ariaLabelRightButton: "Scroll right",
	ariaLabelLeftButton: "Scroll left"
};
var HN_Designsystem_Tabs_nb_NO_default = {
	ariaLabelRightButton: "Scroll til høyre",
	ariaLabelLeftButton: "Scroll til venstre"
};
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_Tabs_en_GB_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_Tabs_nb_NO_default;
	}
};
const TabsRoot = ({ activeTab, children, className, color = "white", containerBreakout = true, onColor = "onwhite", sticky = true, testId, resources, zIndex }) => {
	const isControlled = activeTab !== void 0;
	const [uncontrolledValue, setUncontrolledValue] = useState(0);
	const tabsRef = useRef(null);
	const tabPanelRef = useRef(null);
	const tabListRef = useRef(null);
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const mergedResources = {
		...getResources(language),
		...resources
	};
	let onColorUsed = "onwhite";
	if (color === "white") onColorUsed = onColor;
	const onValueChange = (newValue) => {
		if (!isControlled) setUncontrolledValue(newValue);
	};
	const activeTabIndex = isControlled ? activeTab : uncontrolledValue;
	return /* @__PURE__ */ jsxs("div", {
		className: classNames(className, containerBreakout && designsystemlayout["container-breakout"]),
		"data-testid": testId,
		children: [/* @__PURE__ */ jsxs("div", {
			ref: tabListRef,
			className: classNames(styles["tab-list-wrapper"], { [styles["tab-list-wrapper--sticky"]]: sticky }),
			style: { zIndex },
			children: [/* @__PURE__ */ jsx(TabList_default, {
				onTabListClick: (index) => onValueChange(index),
				selectedTab: activeTabIndex,
				color,
				onColor: onColorUsed,
				ariaLabelLeftButton: mergedResources.ariaLabelLeftButton,
				ariaLabelRightButton: mergedResources.ariaLabelRightButton,
				children
			}), /* @__PURE__ */ jsx("div", { className: classNames(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })]
		}), /* @__PURE__ */ jsx("div", {
			ref: tabsRef,
			style: { marginTop: "-50px" },
			children: /* @__PURE__ */ jsx(TabPanel_default, {
				ref: tabPanelRef,
				color,
				isFirst: activeTabIndex == 0,
				children: React.Children.toArray(children)[activeTabIndex]
			})
		})]
	});
};
var Tabs = TabsRoot;
TabsRoot.displayName = "Tabs";
Tabs.displayName = "Tabs";
Tabs.Tab = Tab_default;
Tabs.Tab.displayName = "Tabs.Tab";
var Tabs_default = Tabs;
export { TabsRoot, Tabs_default as default };

//# sourceMappingURL=index.js.map