import WidgetCard from "../../WidgetCard.mjs";
import FluentStatsSnippet from "../../FluentComponents/atoms/FluentStatsSnippet.mjs";
import ChartSummaryToggle from "../../FluentComponents/ChartSummaryToggle.mjs";
import { convertISODate } from "../../utils/ConvertISODate.mjs";
import { c } from "react-compiler-runtime";
import React, { Fragment, forwardRef } from "react";
import { Box, Grid, Typography } from "@material-ui/core";
import { MuiVegaLite } from "@material-vega/material-ui";
//#region src/UI/widgets/library/DonutChartWidget/DonutChartWidget.jsx
const layout = {
	w: {
		default: 2,
		min: 0,
		max: 4
	},
	h: {
		default: 2,
		min: 0,
		max: 4
	}
};
const DonutChartWidget = (props, ref) => {
	const $ = c(48);
	let children;
	let other;
	let params;
	let setParam;
	if ($[0] !== props) {
		({children, params, setParam, ...other} = props);
		$[0] = props;
		$[1] = children;
		$[2] = other;
		$[3] = params;
		$[4] = setParam;
	} else {
		children = $[1];
		other = $[2];
		params = $[3];
		setParam = $[4];
	}
	const { mockData, theme, dateRange } = params;
	let t0;
	if ($[5] !== dateRange) {
		t0 = dateRange && /* @__PURE__ */ React.createElement(Typography, {
			gutterBottom: true,
			variant: "caption",
			component: "h3"
		}, "From: ", convertISODate(dateRange.from), " to:", " ", convertISODate(dateRange.to));
		$[5] = dateRange;
		$[6] = t0;
	} else t0 = $[6];
	let t1;
	if ($[7] !== mockData?.stats) {
		t1 = mockData?.stats?.map(_temp);
		$[7] = mockData?.stats;
		$[8] = t1;
	} else t1 = $[8];
	let t2;
	if ($[9] !== t1) {
		t2 = /* @__PURE__ */ React.createElement(Grid, { container: true }, t1);
		$[9] = t1;
		$[10] = t2;
	} else t2 = $[10];
	let t3;
	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = {
			overflow: "auto",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			padding: 0
		};
		$[11] = t3;
	} else t3 = $[11];
	const t4 = mockData?.data;
	let t5;
	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
		t5 = [{
			type: "pie",
			field: "value"
		}];
		$[12] = t5;
	} else t5 = $[12];
	let t6;
	if ($[13] !== t4) {
		t6 = {
			name: "table",
			values: t4,
			transform: t5
		};
		$[13] = t4;
		$[14] = t6;
	} else t6 = $[14];
	let t7;
	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
		t7 = {
			type: "formula",
			expr: "datum.id === 'Other' ? 'Other' : 'Main'",
			as: "id"
		};
		$[15] = t7;
	} else t7 = $[15];
	let t8;
	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
		t8 = {
			name: "used",
			source: "table",
			transform: [
				t7,
				{
					type: "aggregate",
					fields: ["field"],
					groupby: ["id"],
					ops: ["sum"],
					as: ["sum"]
				},
				{
					type: "pivot",
					field: "label",
					value: "sum"
				}
			]
		};
		$[16] = t8;
	} else t8 = $[16];
	let t9;
	if ($[17] !== t6) {
		t9 = [t6, t8];
		$[17] = t6;
		$[18] = t9;
	} else t9 = $[18];
	let t10;
	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
		t10 = [{
			name: "color",
			type: "ordinal",
			domain: {
				data: "table",
				field: "label"
			},
			range: { scheme: "greys" }
		}];
		$[19] = t10;
	} else t10 = $[19];
	let t11;
	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
		t11 = {
			type: "arc",
			from: { data: "table" },
			encode: {
				enter: {
					fill: {
						scale: "color",
						field: "label"
					},
					x: { signal: "width / 2" },
					y: { signal: "height / 2" },
					padAngle: { value: .01 }
				},
				update: {
					startAngle: { field: "startAngle" },
					endAngle: { field: "endAngle" },
					innerRadius: { signal: "width / 2 - 10" },
					outerRadius: { signal: "width / 2" }
				}
			}
		};
		$[20] = t11;
	} else t11 = $[20];
	let t12;
	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = [t11, {
			type: "text",
			from: { data: "used" },
			style: ["percent"],
			encode: { enter: {
				x: { signal: "width / 2" },
				y: { signal: "height / 2" },
				align: { value: "center" },
				baseline: { value: "middle" },
				fontSize: { value: 24 }
			} }
		}];
		$[21] = t12;
	} else t12 = $[21];
	let t13;
	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
		t13 = { labels: {
			name: "legendLabel",
			enter: { text: { field: "label" } }
		} };
		$[22] = t13;
	} else t13 = $[22];
	const t14 = theme === "dark" ? "white" : "rgba(0, 0, 0, 0.87)";
	let t15;
	if ($[23] !== t14) {
		t15 = [{
			fill: "color",
			direction: "vertical",
			encode: t13,
			orient: "right",
			labelColor: t14
		}];
		$[23] = t14;
		$[24] = t15;
	} else t15 = $[24];
	let t16;
	if ($[25] !== t15 || $[26] !== t9) {
		t16 = /* @__PURE__ */ React.createElement(Box, {
			clone: true,
			flex: 1,
			mt: 1,
			overflow: "hidden"
		}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
			variant: "donutChart",
			style: t3,
			spec: {
				$schema: "https://vega.github.io/schema/vega/v5.json",
				width: 200,
				height: 200,
				data: t9,
				scales: t10,
				marks: t12,
				legends: t15
			}
		}));
		$[25] = t15;
		$[26] = t9;
		$[27] = t16;
	} else t16 = $[27];
	let t17;
	if ($[28] !== children || $[29] !== t0 || $[30] !== t16 || $[31] !== t2) {
		t17 = /* @__PURE__ */ React.createElement(Fragment, null, t0, t2, t16, children);
		$[28] = children;
		$[29] = t0;
		$[30] = t16;
		$[31] = t2;
		$[32] = t17;
	} else t17 = $[32];
	const body = t17;
	let t18;
	if ($[33] !== setParam) {
		t18 = (value) => setParam("mode", value);
		$[33] = setParam;
		$[34] = t18;
	} else t18 = $[34];
	let t19;
	if ($[35] !== params.mode || $[36] !== t18) {
		t19 = /* @__PURE__ */ React.createElement(ChartSummaryToggle, {
			value: params.mode,
			onChange: t18
		});
		$[35] = params.mode;
		$[36] = t18;
		$[37] = t19;
	} else t19 = $[37];
	const t20 = mockData?.title;
	let t21;
	if ($[38] !== body || $[39] !== mockData) {
		t21 = mockData ? body : /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support.");
		$[38] = body;
		$[39] = mockData;
		$[40] = t21;
	} else t21 = $[40];
	let t22;
	if ($[41] !== other || $[42] !== ref || $[43] !== t19 || $[44] !== t20 || $[45] !== t21 || $[46] !== theme) {
		t22 = /* @__PURE__ */ React.createElement(WidgetCard, {
			theme,
			ref,
			headerActions: t19,
			...other,
			title: t20
		}, t21);
		$[41] = other;
		$[42] = ref;
		$[43] = t19;
		$[44] = t20;
		$[45] = t21;
		$[46] = theme;
		$[47] = t22;
	} else t22 = $[47];
	return t22;
};
var DonutChartWidget_default = forwardRef(DonutChartWidget);
function _temp(stat) {
	return /* @__PURE__ */ React.createElement(Grid, {
		item: true,
		xs: 3,
		key: stat.label
	}, /* @__PURE__ */ React.createElement(FluentStatsSnippet, {
		label: stat.label,
		amount: stat.currentValue,
		prevAmount: stat.previousValue
	}));
}
//#endregion
export { DonutChartWidget_default as default, layout };

//# sourceMappingURL=DonutChartWidget.mjs.map