import { FluentIcon } from "../../utilities/iconLibrary/FluentIcon.mjs";
import { formatDateToLocaleString } from "../../utilities/input/DateUtilities.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Button, Step, StepConnector, StepLabel, Stepper, Typography, lighten, makeStyles, withStyles } from "@material-ui/core";
import { DateTime } from "luxon";
import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
import CheckCircleIcon from "@material-ui/icons/esm/CheckCircle";
import RadioButtonUncheckedIcon from "@material-ui/icons/esm/RadioButtonUnchecked";
import RadioButtonCheckedIcon from "@material-ui/icons/esm/RadioButtonChecked";
//#region src/workflow/components/WorkflowTaskFlow.jsx
const useStyles = makeStyles((theme) => ({
	root: { display: "flex" },
	taskInfoBlock: {
		backgroundColor: lighten(theme.palette.primary.main, .3),
		width: theme.spacing(25),
		color: theme.palette.common.white,
		padding: `${theme.spacing(.5)}px ${theme.spacing(2.25)}px`
	},
	description: {
		textOverflow: "ellipsis",
		overflow: "hidden",
		whiteSpace: "nowrap"
	},
	button: {
		backgroundColor: theme.palette.primary.main,
		color: theme.palette.common.white,
		borderRadius: 0,
		"&:hover": { backgroundColor: theme.palette.primary.dark },
		minWidth: theme.spacing(3)
	},
	stepperContainer: {
		width: "100%",
		padding: 0,
		marginTop: `-${theme.spacing(1.5)}px`,
		background: "none"
	},
	stepIconRoot: {
		zIndex: 1,
		color: theme.palette.primary.main,
		width: theme.spacing(3),
		height: theme.spacing(3),
		display: "flex",
		borderRadius: "50%",
		justifyContent: "center",
		alignItems: "center",
		"&.active": {
			backgroundColor: theme.palette.primary.main,
			color: theme.palette.common.white
		},
		"&.completed": {
			backgroundColor: theme.palette.common.white,
			color: theme.palette.success.main
		}
	},
	stepLabel: { "& > .MuiStepLabel-label": { marginTop: theme.spacing(.5) } }
}));
const ColorLibConnector = withStyles((theme) => ({
	connectorRoot: {
		top: 10,
		left: "calc(-50% + 12px)",
		right: "calc(50% + 12px)"
	},
	alternativeLabel: {
		left: "calc(-50% + 12px)",
		right: "calc(50% + 12px)"
	},
	active: { "& $line": { borderColor: theme.palette.primary.main } },
	completed: { "& $line": { borderColor: theme.palette.primary.main } },
	line: {
		borderTopWidth: 3,
		borderRadius: 1
	}
}))(StepConnector);
const ColorlibStepIcon = (props) => {
	const $ = c(6);
	const { active, completed } = props;
	const rootClass = `${useStyles().stepIconRoot} ${active ? "active" : ""} ${completed ? "completed" : ""}`;
	let t0;
	if ($[0] !== active || $[1] !== completed) {
		t0 = completed ? /* @__PURE__ */ React.createElement(CheckCircleIcon, null) : active ? /* @__PURE__ */ React.createElement(RadioButtonCheckedIcon, null) : /* @__PURE__ */ React.createElement(RadioButtonUncheckedIcon, null);
		$[0] = active;
		$[1] = completed;
		$[2] = t0;
	} else t0 = $[2];
	let t1;
	if ($[3] !== rootClass || $[4] !== t0) {
		t1 = /* @__PURE__ */ React.createElement("div", { className: rootClass }, t0);
		$[3] = rootClass;
		$[4] = t0;
		$[5] = t1;
	} else t1 = $[5];
	return t1;
};
const WorkflowTaskFlow = (props) => {
	const $ = c(52);
	const { steps: t0, handleClick: t1, task } = props;
	let t2;
	if ($[0] !== t0) {
		t2 = t0 === void 0 ? [] : t0;
		$[0] = t0;
		$[1] = t2;
	} else t2 = $[1];
	const steps = t2;
	const handleClick = t1 === void 0 ? _temp : t1;
	const classes = useStyles();
	const [activeStep, setActiveStep] = useState(0);
	let t3;
	if ($[2] !== handleClick) {
		t3 = (stepIndex) => {
			handleClick(stepIndex);
			setActiveStep(stepIndex);
		};
		$[2] = handleClick;
		$[3] = t3;
	} else t3 = $[3];
	const handleStepClick = t3;
	let t4;
	if ($[4] !== activeStep || $[5] !== handleClick) {
		t4 = () => {
			if (activeStep > 0) {
				const newIndex = activeStep - 1;
				handleClick(newIndex);
				setActiveStep(newIndex);
			}
		};
		$[4] = activeStep;
		$[5] = handleClick;
		$[6] = t4;
	} else t4 = $[6];
	const handleOnLeftButtonClick = t4;
	let t5;
	if ($[7] !== activeStep || $[8] !== handleClick || $[9] !== steps.length) {
		t5 = () => {
			if (activeStep !== steps?.length - 1) {
				const newIndex_0 = activeStep + 1;
				handleClick(newIndex_0);
				setActiveStep(newIndex_0);
			}
		};
		$[7] = activeStep;
		$[8] = handleClick;
		$[9] = steps.length;
		$[10] = t5;
	} else t5 = $[10];
	const handleOnRightButtonClick = t5;
	const getFormattedDueDate = _temp2;
	const t6 = classes.root;
	const t7 = classes.taskInfoBlock;
	const t8 = task?.properties?.nodeLabel || "";
	let t9;
	if ($[11] !== t8) {
		t9 = /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, t8);
		$[11] = t8;
		$[12] = t9;
	} else t9 = $[12];
	let t10;
	if ($[13] !== classes.description || $[14] !== t9) {
		t10 = /* @__PURE__ */ React.createElement("div", { className: classes.description }, t9);
		$[13] = classes.description;
		$[14] = t9;
		$[15] = t10;
	} else t10 = $[15];
	const t11 = classes.description;
	let t12;
	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = { fontWeight: 500 };
		$[16] = t12;
	} else t12 = $[16];
	const t13 = getFormattedDueDate(task?.properties?.dueDate);
	let t14;
	if ($[17] !== t13) {
		t14 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "caption",
			style: t12
		}, t13);
		$[17] = t13;
		$[18] = t14;
	} else t14 = $[18];
	let t15;
	if ($[19] !== classes.description || $[20] !== t14) {
		t15 = /* @__PURE__ */ React.createElement("div", { className: t11 }, t14);
		$[19] = classes.description;
		$[20] = t14;
		$[21] = t15;
	} else t15 = $[21];
	let t16;
	if ($[22] !== classes.taskInfoBlock || $[23] !== t10 || $[24] !== t15) {
		t16 = /* @__PURE__ */ React.createElement("div", { className: t7 }, t10, t15);
		$[22] = classes.taskInfoBlock;
		$[23] = t10;
		$[24] = t15;
		$[25] = t16;
	} else t16 = $[25];
	let t17;
	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
		t17 = /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronLeftIcon });
		$[26] = t17;
	} else t17 = $[26];
	let t18;
	if ($[27] !== classes.button || $[28] !== handleOnLeftButtonClick) {
		t18 = /* @__PURE__ */ React.createElement(Button, {
			className: classes.button,
			onClick: handleOnLeftButtonClick
		}, t17);
		$[27] = classes.button;
		$[28] = handleOnLeftButtonClick;
		$[29] = t18;
	} else t18 = $[29];
	let t19;
	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
		t19 = /* @__PURE__ */ React.createElement(ColorLibConnector, null);
		$[30] = t19;
	} else t19 = $[30];
	const t20 = classes.stepperContainer;
	let t21;
	if ($[31] !== classes.stepLabel || $[32] !== handleStepClick || $[33] !== steps) {
		let t22;
		if ($[35] !== classes.stepLabel || $[36] !== handleStepClick) {
			t22 = (step, index) => /* @__PURE__ */ React.createElement(Step, {
				key: step.label,
				onClick: () => handleStepClick(index)
			}, /* @__PURE__ */ React.createElement(StepLabel, {
				classes: { labelContainer: classes.stepLabel },
				StepIconComponent: ColorlibStepIcon
			}, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, step.label)));
			$[35] = classes.stepLabel;
			$[36] = handleStepClick;
			$[37] = t22;
		} else t22 = $[37];
		t21 = steps.map(t22);
		$[31] = classes.stepLabel;
		$[32] = handleStepClick;
		$[33] = steps;
		$[34] = t21;
	} else t21 = $[34];
	let t22;
	if ($[38] !== activeStep || $[39] !== classes.stepperContainer || $[40] !== t21) {
		t22 = /* @__PURE__ */ React.createElement(Stepper, {
			alternativeLabel: true,
			activeStep,
			connector: t19,
			className: t20
		}, t21);
		$[38] = activeStep;
		$[39] = classes.stepperContainer;
		$[40] = t21;
		$[41] = t22;
	} else t22 = $[41];
	let t23;
	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
		t23 = /* @__PURE__ */ React.createElement(FluentIcon, { component: ChevronRightIcon });
		$[42] = t23;
	} else t23 = $[42];
	let t24;
	if ($[43] !== classes.button || $[44] !== handleOnRightButtonClick) {
		t24 = /* @__PURE__ */ React.createElement(Button, {
			className: classes.button,
			onClick: handleOnRightButtonClick
		}, t23);
		$[43] = classes.button;
		$[44] = handleOnRightButtonClick;
		$[45] = t24;
	} else t24 = $[45];
	let t25;
	if ($[46] !== classes.root || $[47] !== t16 || $[48] !== t18 || $[49] !== t22 || $[50] !== t24) {
		t25 = /* @__PURE__ */ React.createElement("div", { className: t6 }, t16, t18, t22, t24);
		$[46] = classes.root;
		$[47] = t16;
		$[48] = t18;
		$[49] = t22;
		$[50] = t24;
		$[51] = t25;
	} else t25 = $[51];
	return t25;
};
function _temp() {}
function _temp2(date) {
	if (!date) return "";
	return `Due ${formatDateToLocaleString(date, DateTime.DATE_SHORT)}`;
}
//#endregion
export { WorkflowTaskFlow };

//# sourceMappingURL=WorkflowTaskFlow.mjs.map