import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { FluentIconButton } from "../inputs/buttons/FluentIconButton.mjs";
import { getIconFromName } from "../../utilities/tree/TreeUtilities.mjs";
import { StatusChip } from "../dataDisplay/status/StatusChip.mjs";
import { IconButtonWithTooltip } from "../inputs/buttons/IconButtonWithToolTip.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { ButtonBase, Collapse, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { ChevronUpIcon } from "@fluentui/react-icons";
//#region src/UI/accordion/Accordion.jsx
const useStyles = makeStyles((theme) => ({
	root: {
		width: "100%",
		height: "100%"
	},
	rootBorder: {
		borderStyle: "solid",
		borderColor: (props) => theme.palette[props?.color]?.main,
		borderWidth: "1px 1px 1px 6px"
	},
	headerWrapper: {
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center",
		backgroundColor: (props) => props?.simpleAccordion && props?.color && props?.color !== "default" ? props?.color === "paper" ? theme.palette.background.paper : lighten(theme.palette[props?.color]?.light, .8) : theme.palette.background.default,
		overflow: "hidden",
		width: (props) => props?.headerWidth ?? "100%"
	},
	secondaryButtonsWrapper: {
		display: "flex",
		gap: theme.spacing(2),
		borderRadius: theme.spacing(2),
		backgroundColor: "white",
		padding: `2px ${theme.spacing(1)}px`,
		width: "fit-content"
	},
	primaryButtonWrapper: {
		minWidth: "68px",
		maxWidth: (props) => props?.primaryActionMaxWidth,
		height: "auto",
		color: "white",
		backgroundColor: (props) => theme.palette[props?.color]?.main,
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		alignSelf: "normal"
	},
	headerColor: { backgroundColor: (props) => props?.color !== "default" && props?.color !== "paper" && lighten(theme.palette[props?.color]?.light, .85) },
	buttonWrapper: {
		display: "flex",
		gap: theme.spacing(.5)
	},
	titleWrapper: {
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center",
		flexGrow: 2,
		margin: (props) => props.removeHeaderMargin ? "0px" : theme.spacing(.8),
		color: theme.palette.text.primary
	},
	closeButtonWrapper: {
		display: "flex",
		justifyContent: "flex-end",
		marginTop: theme.spacing(1)
	},
	unexpandedIconButton: {
		width: "68px",
		height: "40px",
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		alignSelf: "normal",
		borderTop: `solid 1px lightgrey`,
		borderLeft: `solid 1px lightgrey`,
		overflow: "hidden",
		border: (props) => props?.removeBorder && "0px"
	},
	rightIconButton: {
		backgroundColor: "white",
		padding: theme.spacing(1),
		borderRadius: "50%"
	},
	primaryActionLabel: {
		marginRight: theme.spacing(.5),
		marginLeft: theme.spacing(.5)
	},
	expand: {
		transform: "rotate(0deg)",
		marginLeft: "auto",
		marginRight: theme.spacing(1),
		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
	},
	expandOpen: { transform: "rotate(180deg)" },
	titleStatusWrapper: {
		display: "flex",
		alignItems: "center",
		gap: theme.spacing(1)
	}
}));
const Accordion = (props) => {
	const $ = c(104);
	const { title, subtitle, subtitleVariant, status, statusIcon, statusLabel, secondaryIconButtons, overriddenSecondaryContainer, rightIcon, rightIconAction, rightIconTooltip, disableRightIconButton: t0, primaryActionIcon, primaryActionLabel, primaryAction, primaryActionMaxWidth, disablePrimaryActionButton: t1, color: t2, children, expand, setExpand, additionalEvent, hideCloseButton: t3, hideRightIconButton: t4, hidePrimaryAction: t5, noWrapTitle: t6, simpleAccordion: t7, recordId: t8, removeBorder: t9, headerWidth, removeHeaderMargin, titleVariant: t10, chevronIconSize: t11, unmountOnExit: t12 } = props;
	const disableRightIconButton = t0 === void 0 ? false : t0;
	const disablePrimaryActionButton = t1 === void 0 ? false : t1;
	const color = t2 === void 0 ? "info" : t2;
	const hideCloseButton = t3 === void 0 ? false : t3;
	const hideRightIconButton = t4 === void 0 ? false : t4;
	const hidePrimaryAction = t5 === void 0 ? false : t5;
	const noWrapTitle = t6 === void 0 ? false : t6;
	const simpleAccordion = t7 === void 0 ? false : t7;
	const recordId = t8 === void 0 ? 0 : t8;
	const removeBorder = t9 === void 0 ? false : t9;
	const titleVariant = t10 === void 0 ? "subtitle2" : t10;
	const chevronIconSize = t11 === void 0 ? "medium" : t11;
	const unmountOnExit = t12 === void 0 ? true : t12;
	let t13;
	if ($[0] !== color || $[1] !== headerWidth || $[2] !== primaryActionMaxWidth || $[3] !== removeBorder || $[4] !== removeHeaderMargin || $[5] !== simpleAccordion) {
		t13 = {
			color,
			primaryActionMaxWidth,
			simpleAccordion,
			headerWidth,
			removeHeaderMargin,
			removeBorder
		};
		$[0] = color;
		$[1] = headerWidth;
		$[2] = primaryActionMaxWidth;
		$[3] = removeBorder;
		$[4] = removeHeaderMargin;
		$[5] = simpleAccordion;
		$[6] = t13;
	} else t13 = $[6];
	const classes = useStyles(t13);
	let t14;
	if ($[7] !== additionalEvent || $[8] !== expand || $[9] !== setExpand) {
		t14 = () => {
			if (setExpand) setExpand(!expand);
			if (additionalEvent) additionalEvent();
		};
		$[7] = additionalEvent;
		$[8] = expand;
		$[9] = setExpand;
		$[10] = t14;
	} else t14 = $[10];
	const handleOnClickAccordion = t14;
	const t15 = !simpleAccordion & !removeBorder;
	let t16;
	if ($[11] !== classes.root || $[12] !== classes.rootBorder || $[13] !== t15) {
		t16 = clsx(classes.root, { [classes.rootBorder]: t15 });
		$[11] = classes.root;
		$[12] = classes.rootBorder;
		$[13] = t15;
		$[14] = t16;
	} else t16 = $[14];
	const t17 = simpleAccordion ? false : expand;
	let t18;
	if ($[15] !== classes.headerColor || $[16] !== classes.headerWrapper || $[17] !== t17) {
		t18 = clsx(classes.headerWrapper, { [classes.headerColor]: t17 });
		$[15] = classes.headerColor;
		$[16] = classes.headerWrapper;
		$[17] = t17;
		$[18] = t18;
	} else t18 = $[18];
	let t19;
	if ($[19] !== noWrapTitle || $[20] !== title || $[21] !== titleVariant) {
		t19 = /* @__PURE__ */ React.createElement(Typography, {
			variant: titleVariant,
			noWrap: noWrapTitle
		}, title);
		$[19] = noWrapTitle;
		$[20] = title;
		$[21] = titleVariant;
		$[22] = t19;
	} else t19 = $[22];
	let t20;
	if ($[23] !== color || $[24] !== status || $[25] !== statusIcon || $[26] !== statusLabel) {
		t20 = statusLabel && /* @__PURE__ */ React.createElement(StatusChip, {
			status: status ?? color,
			label: statusLabel,
			icon: statusIcon
		});
		$[23] = color;
		$[24] = status;
		$[25] = statusIcon;
		$[26] = statusLabel;
		$[27] = t20;
	} else t20 = $[27];
	let t21;
	if ($[28] !== classes.titleStatusWrapper || $[29] !== t19 || $[30] !== t20) {
		t21 = /* @__PURE__ */ React.createElement("div", { className: classes.titleStatusWrapper }, t19, t20);
		$[28] = classes.titleStatusWrapper;
		$[29] = t19;
		$[30] = t20;
		$[31] = t21;
	} else t21 = $[31];
	let t22;
	if ($[32] !== noWrapTitle || $[33] !== subtitle || $[34] !== subtitleVariant) {
		t22 = subtitle && /* @__PURE__ */ React.createElement(Typography, {
			variant: subtitleVariant,
			noWrap: noWrapTitle
		}, subtitle);
		$[32] = noWrapTitle;
		$[33] = subtitle;
		$[34] = subtitleVariant;
		$[35] = t22;
	} else t22 = $[35];
	let t23;
	if ($[36] !== classes.buttonWrapper || $[37] !== classes.secondaryButtonsWrapper || $[38] !== overriddenSecondaryContainer || $[39] !== recordId || $[40] !== secondaryIconButtons) {
		t23 = overriddenSecondaryContainer ? { overriddenSecondaryContainer } : /* @__PURE__ */ React.createElement("div", null, secondaryIconButtons?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtonsWrapper }, secondaryIconButtons?.map((item) => /* @__PURE__ */ React.createElement("div", { className: classes.buttonWrapper }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
			...item,
			title: item?.title,
			icon: item.icon,
			onClick: (event) => {
				event.stopPropagation();
				item.onClick();
			},
			size: "small",
			id: `udpRecord-Accordion-${item?.title}-${recordId}`,
			udprecordid: `udpRecord-Accordion-${item?.title}-${recordId}`
		}), item?.value && /* @__PURE__ */ React.createElement(Typography, null, item?.value)))));
		$[36] = classes.buttonWrapper;
		$[37] = classes.secondaryButtonsWrapper;
		$[38] = overriddenSecondaryContainer;
		$[39] = recordId;
		$[40] = secondaryIconButtons;
		$[41] = t23;
	} else t23 = $[41];
	let t24;
	if ($[42] !== t21 || $[43] !== t22 || $[44] !== t23) {
		t24 = /* @__PURE__ */ React.createElement("div", null, t21, t22, t23);
		$[42] = t21;
		$[43] = t22;
		$[44] = t23;
		$[45] = t24;
	} else t24 = $[45];
	let t25;
	if ($[46] !== classes.rightIconButton || $[47] !== disableRightIconButton || $[48] !== hideRightIconButton || $[49] !== recordId || $[50] !== rightIcon || $[51] !== rightIconAction || $[52] !== rightIconTooltip || $[53] !== simpleAccordion) {
		t25 = !hideRightIconButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
			title: rightIconTooltip,
			icon: rightIcon,
			onClick: (event_0) => {
				event_0.stopPropagation();
				rightIconAction();
			},
			className: classes.rightIconButton,
			size: "small",
			disabled: disableRightIconButton,
			id: `udpRecord-Accordion-RightButton-${recordId}`,
			udprecordid: `udpRecord-Accordion-RightButton-${recordId}`
		}));
		$[46] = classes.rightIconButton;
		$[47] = disableRightIconButton;
		$[48] = hideRightIconButton;
		$[49] = recordId;
		$[50] = rightIcon;
		$[51] = rightIconAction;
		$[52] = rightIconTooltip;
		$[53] = simpleAccordion;
		$[54] = t25;
	} else t25 = $[54];
	let t26;
	if ($[55] !== classes.titleWrapper || $[56] !== t24 || $[57] !== t25) {
		t26 = /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, t24, t25);
		$[55] = classes.titleWrapper;
		$[56] = t24;
		$[57] = t25;
		$[58] = t26;
	} else t26 = $[58];
	let t27;
	if ($[59] !== classes.primaryActionLabel || $[60] !== classes.primaryButtonWrapper || $[61] !== disablePrimaryActionButton || $[62] !== hidePrimaryAction || $[63] !== primaryAction || $[64] !== primaryActionIcon || $[65] !== primaryActionLabel || $[66] !== recordId || $[67] !== simpleAccordion) {
		t27 = !hidePrimaryAction && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.primaryButtonWrapper }, primaryActionIcon ? /* @__PURE__ */ React.createElement(Tooltip, { title: primaryActionLabel }, /* @__PURE__ */ React.createElement(ButtonBase, {
			onClick: (event_1) => {
				event_1.stopPropagation();
				primaryAction();
			},
			className: classes.primaryButtonWrapper,
			disabled: disablePrimaryActionButton,
			id: `udpRecord-Accordion-ButtonBase-${recordId}`,
			udprecordid: `udpRecord-Accordion-ButtonBase-${recordId}`
		}, /* @__PURE__ */ React.createElement(FluentIcon, { component: primaryActionIcon }))) : /* @__PURE__ */ React.createElement(ButtonBase, {
			onClick: primaryAction,
			className: classes.primaryButtonWrapper,
			disabled: disablePrimaryActionButton
		}, /* @__PURE__ */ React.createElement(Typography, { className: classes.primaryActionLabel }, primaryActionLabel)));
		$[59] = classes.primaryActionLabel;
		$[60] = classes.primaryButtonWrapper;
		$[61] = disablePrimaryActionButton;
		$[62] = hidePrimaryAction;
		$[63] = primaryAction;
		$[64] = primaryActionIcon;
		$[65] = primaryActionLabel;
		$[66] = recordId;
		$[67] = simpleAccordion;
		$[68] = t27;
	} else t27 = $[68];
	let t28;
	if ($[69] !== chevronIconSize || $[70] !== classes.expand || $[71] !== classes.expandOpen || $[72] !== disableRightIconButton || $[73] !== expand || $[74] !== handleOnClickAccordion || $[75] !== recordId || $[76] !== simpleAccordion) {
		t28 = simpleAccordion && /* @__PURE__ */ React.createElement(FluentIconButton, {
			icon: getIconFromName("ChevronDownIcon"),
			onClick: handleOnClickAccordion,
			className: clsx(classes.expand, { [classes.expandOpen]: expand }),
			size: chevronIconSize,
			disabled: disableRightIconButton,
			id: `udpRecord-Accordion-ExpandButton-${recordId}`,
			udprecordid: `udpRecord-Accordion-ExpandButton-${recordId}`
		});
		$[69] = chevronIconSize;
		$[70] = classes.expand;
		$[71] = classes.expandOpen;
		$[72] = disableRightIconButton;
		$[73] = expand;
		$[74] = handleOnClickAccordion;
		$[75] = recordId;
		$[76] = simpleAccordion;
		$[77] = t28;
	} else t28 = $[77];
	let t29;
	if ($[78] !== handleOnClickAccordion || $[79] !== t18 || $[80] !== t26 || $[81] !== t27 || $[82] !== t28) {
		t29 = /* @__PURE__ */ React.createElement("div", {
			className: t18,
			onClick: handleOnClickAccordion
		}, t26, t27, t28);
		$[78] = handleOnClickAccordion;
		$[79] = t18;
		$[80] = t26;
		$[81] = t27;
		$[82] = t28;
		$[83] = t29;
	} else t29 = $[83];
	let t30;
	if ($[84] !== children) {
		t30 = /* @__PURE__ */ React.createElement("div", null, children);
		$[84] = children;
		$[85] = t30;
	} else t30 = $[85];
	let t31;
	if ($[86] !== classes.closeButtonWrapper || $[87] !== classes.unexpandedIconButton || $[88] !== hideCloseButton || $[89] !== recordId || $[90] !== setExpand || $[91] !== simpleAccordion) {
		t31 = !hideCloseButton && !simpleAccordion && /* @__PURE__ */ React.createElement("div", { className: classes.closeButtonWrapper }, /* @__PURE__ */ React.createElement(ButtonBase, {
			onClick: () => {
				if (setExpand) setExpand(false);
			},
			className: classes.unexpandedIconButton,
			id: `udpRecord-Accordion-CloseButton-${recordId}`,
			udprecordid: `udpRecord-Accordion-CloseButton-${recordId}`
		}, /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronUpIcon })));
		$[86] = classes.closeButtonWrapper;
		$[87] = classes.unexpandedIconButton;
		$[88] = hideCloseButton;
		$[89] = recordId;
		$[90] = setExpand;
		$[91] = simpleAccordion;
		$[92] = t31;
	} else t31 = $[92];
	let t32;
	if ($[93] !== t30 || $[94] !== t31) {
		t32 = /* @__PURE__ */ React.createElement("div", null, t30, t31);
		$[93] = t30;
		$[94] = t31;
		$[95] = t32;
	} else t32 = $[95];
	let t33;
	if ($[96] !== expand || $[97] !== t32 || $[98] !== unmountOnExit) {
		t33 = /* @__PURE__ */ React.createElement(Collapse, {
			in: expand,
			timeout: "auto",
			unmountOnExit
		}, t32);
		$[96] = expand;
		$[97] = t32;
		$[98] = unmountOnExit;
		$[99] = t33;
	} else t33 = $[99];
	let t34;
	if ($[100] !== t16 || $[101] !== t29 || $[102] !== t33) {
		t34 = /* @__PURE__ */ React.createElement("div", { className: t16 }, t29, t33);
		$[100] = t16;
		$[101] = t29;
		$[102] = t33;
		$[103] = t34;
	} else t34 = $[103];
	return t34;
};
//#endregion
export { Accordion };

//# sourceMappingURL=Accordion.mjs.map