import { FluentIconButton } from "../inputs/buttons/FluentIconButton.mjs";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
//#region src/UI/templates/SapFlexibleTemplate.jsx
const SapFlexibleTemplate = ({ left, center, right }) => {
	const [columns, setColumns] = useState({
		columnLeft: true,
		columnCenter: true,
		columnRight: true
	});
	const [columnPercent, setColumnPercent] = useState({
		columnLeft: "25%",
		columnCenter: "50%",
		columnRight: "25%"
	});
	const classes = makeStyles((theme) => ({
		root: {
			display: "flex",
			flexDirection: "row"
		},
		columnLeft: {
			display: "flex",
			flex: columnPercent.columnLeft,
			height: "100vh"
		},
		columnCenter: {
			flex: columnPercent.columnCenter,
			height: "100vh"
		},
		columnRight: {
			display: "flex",
			flex: columnPercent.columnRight,
			height: "100vh"
		},
		fillContent: { flex: 1 }
	}))();
	const handleToggleColumn = (columnType) => {
		setColumns({
			...columns,
			columnCenter: !columns.columnCenter
		});
		if (columnType === "columnLeft") {
			setColumnPercent({
				...columnPercent,
				columnLeft: "75%"
			});
			if (columnPercent.columnLeft === "75%") setColumnPercent({
				...columnPercent,
				columnLeft: "25%"
			});
		} else {
			setColumnPercent({
				...columnPercent,
				columnRight: "75%"
			});
			if (columnPercent.columnRight === "75%") setColumnPercent({
				...columnPercent,
				columnRight: "25%"
			});
		}
	};
	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, columns.columnLeft && /* @__PURE__ */ React.createElement("div", { className: classes.columnLeft }, /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, left, " "), /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
		"aria-label": columnPercent.columnLeft === "25%" ? "Expand column" : "Collapse column",
		color: "primary",
		icon: columnPercent.columnLeft === "25%" ? ChevronRightIcon : ChevronLeftIcon,
		onClick: () => handleToggleColumn("columnLeft")
	}))), columns.columnCenter && /* @__PURE__ */ React.createElement("div", { className: classes.columnCenter }, /* @__PURE__ */ React.createElement("div", null, " ", center, " ")), columns.columnRight && /* @__PURE__ */ React.createElement("div", { className: classes.columnRight }, /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
		"aria-label": columnPercent.columnRight === "25%" ? "Expand column" : "Collapse column",
		color: "primary",
		icon: columnPercent.columnRight === "25%" ? ChevronLeftIcon : ChevronRightIcon,
		onClick: () => handleToggleColumn("columnRight")
	})), /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, " ", right, " ")));
};
//#endregion
export { SapFlexibleTemplate };

//# sourceMappingURL=SapFlexibleTemplate.mjs.map