import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Button from "../button/button.js";
import { useTableContext } from "./context.js";
import Td from "./td.js";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/table/tr.tsx
const trClassName = "vui-tr";
const buttonClassName = (isExpanded) => `falAngle${isExpanded ? "Down" : "Right"}`;
const TrBase = styled.trBox`
  position: relative;
  transition-duration: fast;
`;
/** Displays Table row that can contain heading or data cells. */
const Tr = vui((props, ref) => {
	const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props;
	const { variant } = useTableContext() ?? {};
	const styles = useStyleConfig("Table", useTableContext());
	const [isExpanded, setIsExpanded] = useState(isExpandedProp);
	useEffect(() => {
		setIsExpanded(isExpandedProp);
	}, [isExpandedProp]);
	const onToggle = () => {
		if (isExpanded) {
			setIsExpanded(false);
			onCollapsed?.();
		} else {
			setIsExpanded(true);
			onExpanded?.();
		}
	};
	const selectedProps = isSelected ? { bg: "skyBlue.selected" } : {};
	rest.children = /* @__PURE__ */ jsxs(Fragment$1, { children: [nested !== void 0 && /* @__PURE__ */ jsx(Td, {
		maxW: 16,
		px: 0,
		textAlign: "center",
		children: nested ? /* @__PURE__ */ jsx(Button, {
			icon: buttonClassName(isExpanded),
			onClick: onToggle,
			variant: "subtleBlue"
		}) : null
	}), rest.children] });
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TrBase, {
		className: cs(trClassName, `${trClassName}-${isExpanded ? "expanded" : "collapsed"}`, className),
		"data-selected": Boolean(isSelected),
		"data-variant": variant,
		ref,
		...styles.tr,
		...selectedProps,
		...rest
	}), isExpanded && nested] });
});
Tr.displayName = "Tr";

//#endregion
export { TrBase, Tr as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=tr.js.map