import { FluentIconButton } from "../../inputs/buttons/FluentIconButton.mjs";
import { FluentCheckbox } from "../../inputs/checkbox/FluentCheckbox.mjs";
import { getChildrenObjectsWithNoChildren } from "../utilities/MapUtilities.mjs";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { FormControlLabel, FormGroup, makeStyles } from "@material-ui/core";
import clsx from "clsx";
import { ChevronDownIcon } from "@fluentui/react-icons";
import { isEmpty } from "lodash-es";
//#region src/UI/mapLayout/ui/CheckboxGroup.jsx
const useStyles = makeStyles((theme) => ({
	expand: {
		transform: "rotate(0deg)",
		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
	},
	expandOpen: { transform: "rotate(180deg)" },
	iconButtonWrapper: {
		borderRadius: 2,
		margin: "auto 0px"
	},
	expandedList: {
		marginLeft: theme.spacing(4),
		display: "flex",
		flexDirection: "column"
	},
	checkboxGroup: {
		display: "flex",
		justifyContent: "space-between"
	}
}));
const CheckboxGroup = (props) => {
	const { title, options, onChange, defaultExpandedListState = true, values, valueKey } = props;
	const [checkedItems, setCheckedItems] = useState({});
	const [checkedParent, setCheckedParent] = useState(false);
	const [expanded, setExpanded] = useState(defaultExpandedListState);
	const [parentIndeterminate, setParentIndeterminate] = useState(false);
	const classes = useStyles();
	useEffect(() => {
		let preCheckedItems = {};
		options?.forEach((option) => {
			if (!!!option?.options || option?.options?.length === 0) preCheckedItems[option.value] = values?.includes(option.value);
		});
		setCheckedItems(preCheckedItems);
	}, [options, values]);
	const childrenValues = useMemo(() => {
		return getChildrenObjectsWithNoChildren(options ?? [], "value");
	}, [options]);
	useEffect(() => {
		const checkedAll = isEmpty(checkedItems) ? (childrenValues?.length > 0 && childrenValues?.every((val) => values.includes(val))) ?? false : Object.values(checkedItems)?.every((checked) => checked);
		setCheckedParent(checkedAll);
		setParentIndeterminate(!checkedAll && (isEmpty(checkedItems) ? childrenValues?.some((val_0) => values.includes(val_0)) : Object.values(checkedItems)?.some((checked_0) => checked_0)));
	}, [
		checkedItems,
		childrenValues,
		title,
		values
	]);
	const handleOnClickChildCheckboxOnChange = useCallback((event) => {
		setCheckedItems((preVal) => ({
			...preVal,
			[event?.target?.name]: event?.target?.checked
		}));
		if (!event?.target?.checked) onChange(values?.filter((val_1) => val_1 !== event?.target?.name));
		else onChange([...values, event?.target?.name]);
	}, [onChange, values]);
	const handleParentCheckboxOnChange = useCallback((event_0) => {
		setCheckedParent(event_0?.target?.checked);
		if (!event_0?.target?.checked) {
			setCheckedItems({});
			onChange(values?.filter((val_2) => {
				return !childrenValues?.includes(val_2);
			}));
		}
		let newItemToAdd = [];
		childrenValues.forEach((option_0) => {
			if (event_0?.target?.checked && option_0 && !values?.includes(option_0)) newItemToAdd.push(option_0);
		});
		if (newItemToAdd.length > 0) onChange([...values, ...newItemToAdd]);
		setExpanded(true);
		setParentIndeterminate(false);
	}, [
		childrenValues,
		onChange,
		values
	]);
	const childrenList = useMemo(() => {
		if (options?.length > 0) return options?.map((option_1) => {
			if (option_1?.options?.length > 0) return /* @__PURE__ */ React.createElement(CheckboxGroup, {
				key: option_1?.value,
				title: option_1?.title,
				options: option_1?.options,
				values,
				valueKey: option_1?.value,
				onChange
			});
			return /* @__PURE__ */ React.createElement(FormControlLabel, {
				label: option_1?.title,
				control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
					checked: checkedItems[option_1?.value] || false,
					onChange: handleOnClickChildCheckboxOnChange
				}),
				name: option_1?.value
			});
		});
		return [];
	}, [
		checkedItems,
		handleOnClickChildCheckboxOnChange,
		onChange,
		options,
		values
	]);
	return /* @__PURE__ */ React.createElement(FormGroup, null, options?.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classes.checkboxGroup }, /* @__PURE__ */ React.createElement(FormControlLabel, {
		label: title,
		control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
			checked: checkedParent,
			indeterminate: parentIndeterminate,
			onChange: handleParentCheckboxOnChange
		})
	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
		className: clsx(classes.expand, { [classes.expandOpen]: expanded }, classes.iconButtonWrapper),
		onClick: () => setExpanded(!expanded),
		icon: ChevronDownIcon
	})) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FormControlLabel, {
		label: title,
		control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
			checked: checkedItems[valueKey] || false,
			onChange: handleOnClickChildCheckboxOnChange,
			name: valueKey
		})
	})), expanded && options?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.expandedList }, childrenList));
};
//#endregion
export { CheckboxGroup };

//# sourceMappingURL=CheckboxGroup.mjs.map