import { FluentIconButton } from "../buttons/FluentIconButton.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import { SketchPicker } from "react-color";
import { EyedropperIcon } from "@fluentui/react-icons";
//#region src/UI/inputs/pickers/FluentColorPicker.jsx
const useStyles = makeStyles((theme) => ({
	buttonContainer: {
		display: "flex",
		alignItems: "center"
	},
	color: {
		width: theme.spacing(3),
		height: theme.spacing(2),
		borderRadius: theme.spacing(.25),
		background: (props) => props.currentColor?.hex ? props.currentColor.hex : props.currentColor
	},
	swatch: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-around",
		background: "#fff",
		width: theme.spacing(3.5),
		height: theme.spacing(2.5),
		borderRadius: theme.spacing(.25),
		boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
		marginLeft: theme.spacing(.5)
	},
	popover: {
		position: "absolute",
		zIndex: "2"
	},
	cover: {
		position: "fixed",
		top: "0px",
		right: "0px",
		bottom: "0px",
		left: "0px"
	}
}));
const FluentColorPicker = (props) => {
	const $ = c(26);
	const { handleColorChange, onChange, value } = props;
	const [displayColorPicker, setDisplayColorPicker] = useState(false);
	const [currentColor, setCurrentColor] = useState(`${value ? value?.hex ? value.hex : value : ""}`);
	let t0;
	if ($[0] !== currentColor || $[1] !== props) {
		t0 = {
			currentColor,
			...props
		};
		$[0] = currentColor;
		$[1] = props;
		$[2] = t0;
	} else t0 = $[2];
	const classes = useStyles(t0);
	let t1;
	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = () => {
			setDisplayColorPicker(true);
		};
		$[3] = t1;
	} else t1 = $[3];
	const handleOpen = t1;
	let t2;
	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = () => {
			setDisplayColorPicker(false);
		};
		$[4] = t2;
	} else t2 = $[4];
	const handleClose = t2;
	let t3;
	if ($[5] !== handleColorChange || $[6] !== onChange) {
		t3 = (newColor) => {
			if (handleColorChange) handleColorChange(newColor);
			else if (onChange) onChange(newColor.hex);
			setCurrentColor(newColor.hex);
		};
		$[5] = handleColorChange;
		$[6] = onChange;
		$[7] = t3;
	} else t3 = $[7];
	const handleChange = t3;
	let t4;
	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
		t4 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
			onClick: handleOpen,
			color: "primary",
			icon: EyedropperIcon
		}));
		$[8] = t4;
	} else t4 = $[8];
	let t5;
	if ($[9] !== classes.color) {
		t5 = /* @__PURE__ */ React.createElement("div", { className: classes.color });
		$[9] = classes.color;
		$[10] = t5;
	} else t5 = $[10];
	let t6;
	if ($[11] !== classes.swatch || $[12] !== t5) {
		t6 = /* @__PURE__ */ React.createElement("div", { className: classes.swatch }, t5);
		$[11] = classes.swatch;
		$[12] = t5;
		$[13] = t6;
	} else t6 = $[13];
	let t7;
	if ($[14] !== classes.buttonContainer || $[15] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: classes.buttonContainer }, t4, t6);
		$[14] = classes.buttonContainer;
		$[15] = t6;
		$[16] = t7;
	} else t7 = $[16];
	let t8;
	if ($[17] !== classes.cover || $[18] !== classes.popover || $[19] !== currentColor || $[20] !== displayColorPicker || $[21] !== handleChange) {
		t8 = displayColorPicker ? /* @__PURE__ */ React.createElement("div", { className: classes.popover }, /* @__PURE__ */ React.createElement("div", {
			className: classes.cover,
			onClick: handleClose
		}), /* @__PURE__ */ React.createElement(SketchPicker, {
			color: currentColor,
			onChange: handleChange,
			disableAlpha: true
		})) : null;
		$[17] = classes.cover;
		$[18] = classes.popover;
		$[19] = currentColor;
		$[20] = displayColorPicker;
		$[21] = handleChange;
		$[22] = t8;
	} else t8 = $[22];
	let t9;
	if ($[23] !== t7 || $[24] !== t8) {
		t9 = /* @__PURE__ */ React.createElement("div", null, t7, t8);
		$[23] = t7;
		$[24] = t8;
		$[25] = t9;
	} else t9 = $[25];
	return t9;
};
//#endregion
export { FluentColorPicker };

//# sourceMappingURL=FluentColorPicker.mjs.map