import { GridSidebarContainer } from "./GridSidebarContainer.mjs";
import { GridGroupingHeader } from "./GridGroupingHeader.mjs";
import { Token } from "../../components/dataDisplay/Token.mjs";
import { AmbientToggleButton } from "../../inputs/buttons/AmbientToggleButton.mjs";
import AmbientToggleButtonGroupDefaultExport from "../../inputs/buttons/AmbientToggleButtonGroupDefault.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { AssessmentGroupIcon, ChromeCloseIcon } from "@fluentui/react-icons";
import PropTypes from "prop-types";
//#region src/UI/templates/ui/GridGroupingSidebar.jsx
const useStyles = makeStyles((theme) => ({
	root: {},
	groupActionContainer: {
		display: "flex",
		flexDirection: "column",
		flexWrap: "wrap",
		alignContent: "space-around"
	},
	buttonRoot: {
		textTransform: "none",
		fontWeight: 700,
		justifyContent: "flex-start"
	},
	buttonGroupWrapper: { gap: theme.spacing(2) }
}));
const GridGroupingSidebar = (t0) => {
	const $ = c(29);
	const { groupItem, expandClick, collapseClick, closeClick, groupingData, height, color: t1 } = t0;
	const color = t1 === void 0 ? "#F5F2F8" : t1;
	const classes = useStyles();
	const [view, setView] = useState("");
	let t2;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = (event, nextView) => {
			setView(nextView);
		};
		$[0] = t2;
	} else t2 = $[0];
	const handleChange = t2;
	const GroupItem = _temp;
	const t3 = classes.root;
	let t4;
	if ($[1] !== closeClick || $[2] !== collapseClick || $[3] !== expandClick) {
		t4 = /* @__PURE__ */ React.createElement(GridGroupingHeader, {
			expandClick,
			collapseClick,
			closeClick
		});
		$[1] = closeClick;
		$[2] = collapseClick;
		$[3] = expandClick;
		$[4] = t4;
	} else t4 = $[4];
	const t5 = classes.groupActionContainer;
	const t6 = classes.buttonGroupWrapper;
	let t7;
	if ($[5] !== groupItem || $[6] !== groupingData) {
		let t8;
		if ($[8] !== groupItem) {
			t8 = (item) => /* @__PURE__ */ React.createElement(AmbientToggleButton, {
				value: item.value,
				"aria-label": item.label,
				onClick: () => groupItem(item.groupItem)
			}, /* @__PURE__ */ React.createElement(GroupItem, { label: item.label }));
			$[8] = groupItem;
			$[9] = t8;
		} else t8 = $[9];
		t7 = groupingData.map(t8);
		$[5] = groupItem;
		$[6] = groupingData;
		$[7] = t7;
	} else t7 = $[7];
	let t8;
	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
		t8 = /* @__PURE__ */ React.createElement(GroupItem, {
			label: "No Groups",
			clear: true
		});
		$[10] = t8;
	} else t8 = $[10];
	let t9;
	if ($[11] !== closeClick) {
		t9 = /* @__PURE__ */ React.createElement(AmbientToggleButton, {
			value: "noGroups",
			"aria-label": "noGroups",
			onClick: closeClick
		}, t8);
		$[11] = closeClick;
		$[12] = t9;
	} else t9 = $[12];
	let t10;
	if ($[13] !== classes.buttonGroupWrapper || $[14] !== t7 || $[15] !== t9 || $[16] !== view) {
		t10 = /* @__PURE__ */ React.createElement(AmbientToggleButtonGroupDefaultExport, {
			orientation: "vertical",
			value: view,
			exclusive: true,
			onChange: handleChange,
			className: t6
		}, t7, t9);
		$[13] = classes.buttonGroupWrapper;
		$[14] = t7;
		$[15] = t9;
		$[16] = view;
		$[17] = t10;
	} else t10 = $[17];
	let t11;
	if ($[18] !== classes.groupActionContainer || $[19] !== t10) {
		t11 = /* @__PURE__ */ React.createElement("div", { className: t5 }, t10);
		$[18] = classes.groupActionContainer;
		$[19] = t10;
		$[20] = t11;
	} else t11 = $[20];
	let t12;
	if ($[21] !== color || $[22] !== height || $[23] !== t11 || $[24] !== t4) {
		t12 = /* @__PURE__ */ React.createElement(GridSidebarContainer, {
			color,
			height
		}, t4, t11);
		$[21] = color;
		$[22] = height;
		$[23] = t11;
		$[24] = t4;
		$[25] = t12;
	} else t12 = $[25];
	let t13;
	if ($[26] !== classes.root || $[27] !== t12) {
		t13 = /* @__PURE__ */ React.createElement("div", { className: t3 }, t12);
		$[26] = classes.root;
		$[27] = t12;
		$[28] = t13;
	} else t13 = $[28];
	return t13;
};
GridGroupingSidebar.propTypes = {
	groupItem: PropTypes.func,
	expandClick: PropTypes.func,
	collapseClick: PropTypes.func,
	closeClick: PropTypes.func,
	groupingData: PropTypes.array,
	color: PropTypes.string
};
function _temp(t0) {
	const { label, clear } = t0;
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Token, {
		icon: clear ? ChromeCloseIcon : AssessmentGroupIcon,
		color: "trigger",
		size: "small",
		variant: "filled",
		type: "icon"
	}), /* @__PURE__ */ React.createElement(Typography, {
		variant: "caption",
		style: { color: "black" }
	}, " ", label, " "));
}
//#endregion
export { GridGroupingSidebar };

//# sourceMappingURL=GridGroupingSidebar.mjs.map