import { n as AnalyticsId } from "./constants2.js";
import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
import { n as getAriaLabelAttributes } from "./accessibility.js";
import { t as useIsVisible } from "./useIsVisible.js";
import { t as useLayoutEvent } from "./useLayoutEvent.js";
import { t as HorizontalScroll_default } from "./HorizontalScroll.js";
import { t as isTouchDevice } from "./device.js";
import React, { useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { jsx } from "react/jsx-runtime";
import tableStyles from "./components/Table/styles.module.scss";
var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
var getConfigForBreakpoint = (config, breakpoint) => {
	if (Array.isArray(config)) {
		config.sort(sortByBreakpointsDescending);
		return config.find((x) => isValidForCurrentBreakpoint(x, breakpoint));
	} else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
};
const getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
	const canUseHorizontalScroll = isTouchDevice();
	const canUseCenteredOverflow = tableWidth <= windowWidth;
	if (!breakpointConfig) return;
	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,
		breakpoint: breakpointConfig.breakpoint
	};
	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow) return {
		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
		breakpoint: breakpointConfig.breakpoint
	};
	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,
		breakpoint: breakpointConfig.breakpoint
	};
	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
		breakpoint: breakpointConfig.breakpoint
	};
	return breakpointConfig;
};
const getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
const getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
	if (parentWidth >= tableWidth) return;
	return { left: `${(parentWidth - tableWidth) / 2 - 8}px` };
};
let ResponsiveTableVariant = /* @__PURE__ */ function(ResponsiveTableVariant$1) {
	ResponsiveTableVariant$1["none"] = "none";
	ResponsiveTableVariant$1["centeredoverflow"] = "centeredoverflow";
	ResponsiveTableVariant$1["horizontalscroll"] = "horizontalscroll";
	ResponsiveTableVariant$1["block"] = "block";
	return ResponsiveTableVariant$1;
}({});
let ModeType = /* @__PURE__ */ function(ModeType$1) {
	ModeType$1["compact"] = "compact";
	ModeType$1["normal"] = "normal";
	return ModeType$1;
}({});
const defaultConfig = [{
	breakpoint: "xl",
	variant: ResponsiveTableVariant.centeredoverflow,
	fallbackVariant: ResponsiveTableVariant.horizontalscroll
}];
const simpleConfig = [{
	breakpoint: "xl",
	variant: ResponsiveTableVariant.centeredoverflow,
	fallbackVariant: ResponsiveTableVariant.horizontalscroll
}, {
	breakpoint: "sm",
	variant: ResponsiveTableVariant.centeredoverflow,
	fallbackVariant: ResponsiveTableVariant.block
}];
const Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
	const [currentConfig, setCurrentConfig] = useState();
	const [tableWidth, setTableWidth] = useState(0);
	const [parentWidth, setParentWidth] = useState(0);
	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
	const tableRef = useRef(null);
	const tableIsVisible = useIsVisible(tableRef, 0);
	const breakpoint = useBreakpoint();
	useEffect(() => {
		setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));
	}, [
		breakpointConfig,
		breakpoint,
		tableWidth,
		windowWidth
	]);
	useEffect(() => {
		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow || currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);
	}, [currentConfig, breakpoint]);
	useLayoutEvent(() => setWindowWidth(window.innerWidth), ["resize"], 100);
	useEffect(() => {
		if (tableWidth === 0 && tableIsVisible) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
	}, [tableWidth, tableIsVisible]);
	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
	const breakpointClass = getBreakpointClass(currentConfig);
	const table = /* @__PURE__ */ jsx("table", {
		className: classNames(tableStyles.table, breakpointClass, className),
		id,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Table,
		ref: tableRef,
		style: tableStyle,
		...rest,
		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
	});
	const ariaLabelAttributes = getAriaLabelAttributes({
		label: scrollAriaLabel,
		id: scrollAriaLabelledById
	});
	if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) return /* @__PURE__ */ jsx(HorizontalScroll_default, {
		childWidth: tableWidth,
		testId: "horizontal-scroll",
		...ariaLabelAttributes,
		children: table
	});
	return table;
};
export { simpleConfig as a, defaultConfig as i, ResponsiveTableVariant as n, Table as r, ModeType as t };

//# sourceMappingURL=Table.js.map