import { AmbientCard } from "../AmbientCard/AmbientCard.mjs";
import { AmbientToggleButton } from "../../../inputs/buttons/AmbientToggleButton.mjs";
import { FluentSimpleTab } from "../../../navigation/tabs/defaultTabs/FluentSimpleTab.mjs";
import { FluentSimpleTabs } from "../../../navigation/tabs/defaultTabs/FluentSimpleTabs.mjs";
import { FluentTabPanel } from "../../../navigation/tabs/defaultTabs/FluentTabPanel.mjs";
import { AmbientToggleButtonGroup } from "../../../inputs/buttons/AmbientToggleButtonGroup.mjs";
import { AmbientVisualizer } from "../../../dataDisplay/visualization/AmbientVisualizer.mjs";
import { TokenGroupItem } from "../../../templates/ui/TokenGroupItem.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
//#region src/UI/surfaces/cards/chartDisplayCards/AmbientVisualizationCard.jsx
const useStyles = makeStyles((theme) => ({
	root: { position: "relative" },
	item: { marginRight: theme.spacing(2) },
	tabPanelContents: { marginLeft: theme.spacing(2) },
	togglePadding: { padding: theme.spacing(2) }
}));
const AmbientVisualizationCard = (t0) => {
	const $ = c(83);
	const { title, toggleList1, toggleList2, toggleList3, tabList, tabContent1, tabContent2, tabContent3 } = t0;
	const classes = useStyles();
	const [value, setValue] = useState(0);
	const [toggleValue, setToggleValue] = useState("month");
	let t1;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = (event, newValue) => {
			setValue(newValue);
		};
		$[0] = t1;
	} else t1 = $[0];
	const handleChange = t1;
	let t2;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = (event_0, nextView) => {
			setToggleValue(nextView);
		};
		$[1] = t2;
	} else t2 = $[1];
	const selectToggle = t2;
	let t3;
	if ($[2] !== tabContent1 || $[3] !== toggleValue) {
		t3 = tabContent1 && tabContent1.map((item) => toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
			values: item.values,
			visualization: item.chartType,
			verticalBarColor: item.verticalBarColor,
			verticalBarBand: item.verticalBarBand,
			verticalBarXfield: item.verticalBarXfield,
			verticalBarXtype: item.verticalBarXtype,
			verticalBarYfield: item.verticalBarYfield,
			verticalBarYtype: item.verticalBarYtype,
			styleThin: item.styleThin
		})));
		$[2] = tabContent1;
		$[3] = toggleValue;
		$[4] = t3;
	} else t3 = $[4];
	let t4;
	if ($[5] !== classes.tabPanelContents || $[6] !== t3) {
		t4 = /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, t3);
		$[5] = classes.tabPanelContents;
		$[6] = t3;
		$[7] = t4;
	} else t4 = $[7];
	let t5;
	if ($[8] !== t4 || $[9] !== value) {
		t5 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 0
		}, t4);
		$[8] = t4;
		$[9] = value;
		$[10] = t5;
	} else t5 = $[10];
	let t6;
	if ($[11] !== tabContent2 || $[12] !== toggleValue) {
		t6 = tabContent2 && tabContent2.map((item_0) => toggleValue === item_0.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
			values: item_0.values,
			visualization: item_0.chartType,
			verticalBarColor: item_0.verticalBarColor,
			verticalBarBand: item_0.verticalBarBand,
			verticalBarXfield: item_0.verticalBarXfield,
			verticalBarXtype: item_0.verticalBarXtype,
			verticalBarYfield: item_0.verticalBarYfield,
			verticalBarYtype: item_0.verticalBarYtype,
			styleThin: item_0.styleThin
		})));
		$[11] = tabContent2;
		$[12] = toggleValue;
		$[13] = t6;
	} else t6 = $[13];
	let t7;
	if ($[14] !== classes.tabPanelContents || $[15] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, t6);
		$[14] = classes.tabPanelContents;
		$[15] = t6;
		$[16] = t7;
	} else t7 = $[16];
	let t8;
	if ($[17] !== t7 || $[18] !== value) {
		t8 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 1
		}, t7);
		$[17] = t7;
		$[18] = value;
		$[19] = t8;
	} else t8 = $[19];
	let t9;
	if ($[20] !== tabContent3 || $[21] !== toggleValue) {
		t9 = tabContent3 && tabContent3.map((item_1) => toggleValue === item_1.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
			values: item_1.values,
			visualization: item_1.chartType,
			verticalBarColor: item_1.verticalBarColor,
			verticalBarBand: item_1.verticalBarBand,
			verticalBarXfield: item_1.verticalBarXfield,
			verticalBarXtype: item_1.verticalBarXtype,
			verticalBarYfield: item_1.verticalBarYfield,
			verticalBarYtype: item_1.verticalBarYtype,
			styleThin: item_1.styleThin
		})));
		$[20] = tabContent3;
		$[21] = toggleValue;
		$[22] = t9;
	} else t9 = $[22];
	let t10;
	if ($[23] !== classes.tabPanelContents || $[24] !== t9) {
		t10 = /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, t9);
		$[23] = classes.tabPanelContents;
		$[24] = t9;
		$[25] = t10;
	} else t10 = $[25];
	let t11;
	if ($[26] !== t10 || $[27] !== value) {
		t11 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 2
		}, t10);
		$[26] = t10;
		$[27] = value;
		$[28] = t11;
	} else t11 = $[28];
	let t12;
	if ($[29] !== tabList) {
		t12 = tabList && tabList.map(_temp);
		$[29] = tabList;
		$[30] = t12;
	} else t12 = $[30];
	let t13;
	if ($[31] !== t12 || $[32] !== value) {
		t13 = /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
			value,
			onChange: handleChange,
			"aria-label": "simple tabs example"
		}, t12);
		$[31] = t12;
		$[32] = value;
		$[33] = t13;
	} else t13 = $[33];
	let t14;
	if ($[34] !== classes.item || $[35] !== toggleList1) {
		t14 = toggleList1 && toggleList1.map((item_3) => /* @__PURE__ */ React.createElement(AmbientToggleButton, {
			value: item_3.value,
			"aria-label": item_3.ariaLabel,
			onMouseUp: item_3.onClick,
			onClick: selectToggle,
			className: classes.item
		}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
			label: item_3.label,
			icon: item_3.icon
		})));
		$[34] = classes.item;
		$[35] = toggleList1;
		$[36] = t14;
	} else t14 = $[36];
	let t15;
	if ($[37] !== t14 || $[38] !== toggleValue) {
		t15 = /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
			orientation: "horizontal",
			value: toggleValue
		}, t14);
		$[37] = t14;
		$[38] = toggleValue;
		$[39] = t15;
	} else t15 = $[39];
	let t16;
	if ($[40] !== classes.togglePadding || $[41] !== t15) {
		t16 = /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, t15);
		$[40] = classes.togglePadding;
		$[41] = t15;
		$[42] = t16;
	} else t16 = $[42];
	let t17;
	if ($[43] !== t16 || $[44] !== value) {
		t17 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 0
		}, t16);
		$[43] = t16;
		$[44] = value;
		$[45] = t17;
	} else t17 = $[45];
	let t18;
	if ($[46] !== classes.item || $[47] !== toggleList2) {
		t18 = toggleList2 && toggleList2.map((item_4) => /* @__PURE__ */ React.createElement(AmbientToggleButton, {
			value: item_4.value,
			"aria-label": item_4.ariaLabel,
			onMouseUp: item_4.onClick,
			onClick: selectToggle,
			className: classes.item
		}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
			label: item_4.label,
			icon: item_4.icon
		})));
		$[46] = classes.item;
		$[47] = toggleList2;
		$[48] = t18;
	} else t18 = $[48];
	let t19;
	if ($[49] !== t18 || $[50] !== toggleValue) {
		t19 = /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
			orientation: "horizontal",
			value: toggleValue
		}, t18);
		$[49] = t18;
		$[50] = toggleValue;
		$[51] = t19;
	} else t19 = $[51];
	let t20;
	if ($[52] !== classes.togglePadding || $[53] !== t19) {
		t20 = /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, t19);
		$[52] = classes.togglePadding;
		$[53] = t19;
		$[54] = t20;
	} else t20 = $[54];
	let t21;
	if ($[55] !== t20 || $[56] !== value) {
		t21 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 1
		}, t20);
		$[55] = t20;
		$[56] = value;
		$[57] = t21;
	} else t21 = $[57];
	let t22;
	if ($[58] !== classes.item || $[59] !== toggleList3) {
		t22 = toggleList3 && toggleList3.map((item_5) => /* @__PURE__ */ React.createElement(AmbientToggleButton, {
			value: item_5.value,
			"aria-label": item_5.ariaLabel,
			onMouseUp: item_5.onClick,
			onClick: selectToggle,
			className: classes.item
		}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
			label: item_5.label,
			icon: item_5.icon
		})));
		$[58] = classes.item;
		$[59] = toggleList3;
		$[60] = t22;
	} else t22 = $[60];
	let t23;
	if ($[61] !== t22 || $[62] !== toggleValue) {
		t23 = /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
			orientation: "horizontal",
			value: toggleValue
		}, t22);
		$[61] = t22;
		$[62] = toggleValue;
		$[63] = t23;
	} else t23 = $[63];
	let t24;
	if ($[64] !== classes.togglePadding || $[65] !== t23) {
		t24 = /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, t23);
		$[64] = classes.togglePadding;
		$[65] = t23;
		$[66] = t24;
	} else t24 = $[66];
	let t25;
	if ($[67] !== t24 || $[68] !== value) {
		t25 = /* @__PURE__ */ React.createElement(FluentTabPanel, {
			value,
			index: 2
		}, t24);
		$[67] = t24;
		$[68] = value;
		$[69] = t25;
	} else t25 = $[69];
	let t26;
	if ($[70] !== t13 || $[71] !== t17 || $[72] !== t21 || $[73] !== t25) {
		t26 = /* @__PURE__ */ React.createElement("div", null, t13, t17, t21, t25);
		$[70] = t13;
		$[71] = t17;
		$[72] = t21;
		$[73] = t25;
		$[74] = t26;
	} else t26 = $[74];
	let t27;
	if ($[75] !== t11 || $[76] !== t26 || $[77] !== t5 || $[78] !== t8) {
		t27 = /* @__PURE__ */ React.createElement("div", null, t5, t8, t11, t26);
		$[75] = t11;
		$[76] = t26;
		$[77] = t5;
		$[78] = t8;
		$[79] = t27;
	} else t27 = $[79];
	let t28;
	if ($[80] !== t27 || $[81] !== title) {
		t28 = /* @__PURE__ */ React.createElement(AmbientCard, {
			title,
			customAdornment: " ",
			visualization: t27
		});
		$[80] = t27;
		$[81] = title;
		$[82] = t28;
	} else t28 = $[82];
	return t28;
};
function _temp(item_2) {
	return /* @__PURE__ */ React.createElement(FluentSimpleTab, { label: item_2.label });
}
//#endregion
export { AmbientVisualizationCard };

//# sourceMappingURL=AmbientVisualizationCard.mjs.map