import { ClientSideUdpGrid } from "../UI/templates/newGrid/ClientSideUdpGrid.mjs";
import { c } from "react-compiler-runtime";
import React, { useEffect, useRef, useState } from "react";
import { UdpCompoundButton, UdpField, UdpFluentButton, UdpFluentCheckbox, UdpFluentDialog, UdpFluentDrawer, UdpFluentMenu, UdpFluentTablist, UdpFluentTextInput, UdpFormComponent, UdpIcon, UdpTabPanel } from "udp-react-stencil-component-library";
//#region src/test/TestStencilWrappedComponentsPage.tsx
const checkboxMenuItems = [
	{
		id: "c1-1",
		text: "Checkbox 1-A",
		sectionNumber: 1,
		type: "checkbox"
	},
	{
		id: "c1-2",
		text: "Checkbox 1-B",
		sectionNumber: 1,
		type: "checkbox"
	},
	{
		id: "c2-1",
		text: "Checkbox 2-A",
		sectionNumber: 2,
		type: "checkbox"
	},
	{
		id: "c2-2",
		text: "Checkbox 2-B",
		sectionNumber: 2,
		type: "checkbox"
	},
	{
		id: "c3",
		text: "More Options"
	},
	{
		id: "c3-1",
		text: "Sub Checkbox 1",
		parentId: "c3",
		type: "checkbox"
	},
	{
		id: "c3-2",
		text: "Sub Checkbox 2",
		parentId: "c3",
		type: "checkbox"
	}
];
const mustHaveExclamation = (value) => {
	if (!value) return void 0;
	if (typeof value === "string" && value.includes("!")) return;
	return "You must include an exclamation mark (!)";
};
const TestStencilWrappedComponentsPage = () => {
	const $ = c(56);
	const [open, setOpen] = useState(false);
	const [dialogOpen, setDialogOpen] = useState(false);
	const [formDrawerOpen, setFormDrawerOpen] = useState(false);
	const [activeTab, setActiveTab] = useState("tab1");
	let t0;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t0 = {};
		$[0] = t0;
	} else t0 = $[0];
	const [formData, setFormData] = useState(t0);
	const [isLoading, setIsLoading] = useState(true);
	const formInstance = useRef(null);
	let t1;
	let t2;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = () => {
			console.log("Fetching data...");
			const timer = setTimeout(() => {
				setFormData({
					firstName: "Async John",
					email: "async_john@example.com",
					age: "45",
					newsletter: true,
					exclamation: "Late arrival!"
				});
				setIsLoading(false);
			}, 2e3);
			return () => clearTimeout(timer);
		};
		t2 = [];
		$[1] = t1;
		$[2] = t2;
	} else {
		t1 = $[1];
		t2 = $[2];
	}
	useEffect(t1, t2);
	let t3;
	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = () => {
			setOpen(false);
		};
		$[3] = t3;
	} else t3 = $[3];
	const handleDrawerClose = t3;
	let t4;
	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
		t4 = () => {
			setDialogOpen(false);
		};
		$[4] = t4;
	} else t4 = $[4];
	const handleDialogClose = t4;
	let t5;
	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
		t5 = () => {
			setFormDrawerOpen(false);
		};
		$[5] = t5;
	} else t5 = $[5];
	const handleFormDrawerClose = t5;
	let t6;
	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
		t6 = (values) => {
			console.log("Form submitted with values:", values);
			setFormDrawerOpen(false);
		};
		$[6] = t6;
	} else t6 = $[6];
	const handleFormSubmit = t6;
	const validateForm = _temp;
	let t7;
	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
		t7 = (e) => {
			formInstance.current = e.detail;
		};
		$[7] = t7;
	} else t7 = $[7];
	const handleFormReady = t7;
	let t8;
	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
		t8 = {
			display: "flex",
			flexDirection: "column"
		};
		$[8] = t8;
	} else t8 = $[8];
	let t9;
	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
		t9 = /* @__PURE__ */ React.createElement(UdpFluentButton, { onClick: () => setOpen(true) }, "Open Sidesheet");
		$[9] = t9;
	} else t9 = $[9];
	let t10;
	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
		t10 = /* @__PURE__ */ React.createElement(UdpFluentButton, { onClick: () => setFormDrawerOpen(true) }, "Open Form Drawer");
		$[10] = t10;
	} else t10 = $[10];
	let t11;
	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
		t11 = /* @__PURE__ */ React.createElement(UdpCompoundButton, {
			appearance: "transparent",
			shape: "rounded",
			size: "medium",
			onClick: _temp2
		}, /* @__PURE__ */ React.createElement("span", { slot: "description" }, "Description content"), /* @__PURE__ */ React.createElement(UdpIcon, {
			iconName: "add",
			slot: "start",
			color: "inherit"
		}), "Compound Button");
		$[11] = t11;
	} else t11 = $[11];
	let t12;
	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = /* @__PURE__ */ React.createElement(ClientSideUdpGrid, {
			columnDefs: [
				{ field: "make" },
				{ field: "model" },
				{ field: "price" }
			],
			rowData: [
				{
					make: "Toyota",
					model: "Celica",
					price: 35e3
				},
				{
					make: "Ford",
					model: "Mondeo",
					price: 32e3
				},
				{
					make: "Porsche",
					model: "Boxster",
					price: 72e3
				}
			]
		});
		$[12] = t12;
	} else t12 = $[12];
	let t13;
	if ($[13] !== open) {
		t13 = /* @__PURE__ */ React.createElement(UdpFluentDrawer, {
			open,
			onDrawerClose: handleDrawerClose,
			title: "Drawer Title"
		}, t12);
		$[13] = open;
		$[14] = t13;
	} else t13 = $[14];
	let t14;
	if ($[15] !== formData || $[16] !== isLoading) {
		t14 = isLoading ? /* @__PURE__ */ React.createElement("div", null, "Loading form data...") : /* @__PURE__ */ React.createElement(UdpFormComponent, {
			id: "user-form",
			validate: validateForm,
			onFormReady: handleFormReady,
			onSubmit: handleFormSubmit,
			initialValues: formData
		}, /* @__PURE__ */ React.createElement("div", { style: {
			display: "flex",
			gap: "1rem",
			flexDirection: "column"
		} }, /* @__PURE__ */ React.createElement(UdpField, { name: "firstName" }, /* @__PURE__ */ React.createElement(UdpFluentTextInput, { label: "First Name" })), /* @__PURE__ */ React.createElement(UdpField, { name: "email" }, /* @__PURE__ */ React.createElement(UdpFluentTextInput, {
			label: "Email Address",
			type: "email",
			autoFocus: true,
			controlSize: "large",
			value: "jordanatchison@univerus.com"
		})), /* @__PURE__ */ React.createElement(UdpField, { name: "age" }, /* @__PURE__ */ React.createElement(UdpFluentTextInput, {
			label: "Age",
			required: true
		})), /* @__PURE__ */ React.createElement(UdpField, {
			name: "exclamation",
			validate: mustHaveExclamation
		}, /* @__PURE__ */ React.createElement(UdpFluentTextInput, {
			label: "Exclamation",
			hint: "exclamation mark please"
		})), /* @__PURE__ */ React.createElement(UdpField, { name: "newsletter" }, /* @__PURE__ */ React.createElement(UdpFluentCheckbox, {
			disabled: true,
			label: "Subscribe to newsletter",
			hint: "We will only send you emails about important updates"
		}))));
		$[15] = formData;
		$[16] = isLoading;
		$[17] = t14;
	} else t14 = $[17];
	let t15;
	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
		t15 = /* @__PURE__ */ React.createElement(UdpFluentButton, {
			appearance: "primary",
			slot: "footer",
			onClick: () => void formInstance.current?.submit()
		}, "Submit Form");
		$[18] = t15;
	} else t15 = $[18];
	let t16;
	if ($[19] !== formDrawerOpen || $[20] !== t14) {
		t16 = /* @__PURE__ */ React.createElement(UdpFluentDrawer, {
			open: formDrawerOpen,
			onDrawerClose: handleFormDrawerClose
		}, t14, t15);
		$[19] = formDrawerOpen;
		$[20] = t14;
		$[21] = t16;
	} else t16 = $[21];
	let t17;
	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
		t17 = {
			display: "flex",
			flexDirection: "column",
			gap: "1rem",
			marginTop: "2rem"
		};
		$[22] = t17;
	} else t17 = $[22];
	let t18;
	let t19;
	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
		t18 = (e_0) => setActiveTab(e_0.detail);
		t19 = [
			{
				id: "tab1",
				label: "Tab 1 (Static)"
			},
			{
				id: "tab2",
				label: "Tab 2 (Lazy)"
			},
			{
				id: "tab3",
				label: "Tab 3 (Default Lazy)"
			}
		];
		$[23] = t18;
		$[24] = t19;
	} else {
		t18 = $[23];
		t19 = $[24];
	}
	let t20;
	if ($[25] !== activeTab) {
		t20 = /* @__PURE__ */ React.createElement(UdpFluentTablist, {
			activeId: activeTab,
			appearance: "transparent",
			size: "small",
			orientation: "vertical",
			onTabChange: t18,
			tabList: t19
		});
		$[25] = activeTab;
		$[26] = t20;
	} else t20 = $[26];
	let t21;
	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
		t21 = {
			padding: "1rem",
			border: "1px solid #ccc"
		};
		$[27] = t21;
	} else t21 = $[27];
	let t22;
	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
		t22 = /* @__PURE__ */ React.createElement("h3", null, "Dialog Example");
		$[28] = t22;
	} else t22 = $[28];
	let t23;
	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
		t23 = /* @__PURE__ */ React.createElement(UdpFluentButton, { onClick: () => setDialogOpen(true) }, "Open Dialog");
		$[29] = t23;
	} else t23 = $[29];
	let t24;
	let t25;
	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
		t24 = /* @__PURE__ */ React.createElement(UdpFluentButton, {
			slot: "action",
			onClick: handleDialogClose
		}, "Submit");
		t25 = /* @__PURE__ */ React.createElement("div", null, "This is a simple dialog example.");
		$[30] = t24;
		$[31] = t25;
	} else {
		t24 = $[30];
		t25 = $[31];
	}
	let t26;
	if ($[32] !== dialogOpen) {
		t26 = /* @__PURE__ */ React.createElement(UdpFluentDialog, {
			open: dialogOpen,
			title: "Example Dialog",
			onDialogClose: handleDialogClose
		}, t24, t25);
		$[32] = dialogOpen;
		$[33] = t26;
	} else t26 = $[33];
	let t27;
	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
		t27 = /* @__PURE__ */ React.createElement(UdpFluentMenu, {
			items: checkboxMenuItems,
			onClick: _temp3,
			label: "Menu"
		});
		$[34] = t27;
	} else t27 = $[34];
	let t28;
	if ($[35] !== activeTab || $[36] !== t26) {
		t28 = /* @__PURE__ */ React.createElement(UdpTabPanel, {
			id: "tab1",
			activeTabId: activeTab
		}, t22, t23, t26, t27);
		$[35] = activeTab;
		$[36] = t26;
		$[37] = t28;
	} else t28 = $[37];
	let t29;
	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
		t29 = /* @__PURE__ */ React.createElement(ClientSideUdpGrid, {
			columnDefs: [
				{ field: "make" },
				{ field: "model" },
				{ field: "price" }
			],
			rowData: [
				{
					make: "Toyota",
					model: "Celica",
					price: 35e3
				},
				{
					make: "Ford",
					model: "Mondeo",
					price: 32e3
				},
				{
					make: "Porsche",
					model: "Boxster",
					price: 72e3
				}
			]
		});
		$[38] = t29;
	} else t29 = $[38];
	let t30;
	if ($[39] !== activeTab) {
		t30 = /* @__PURE__ */ React.createElement(UdpTabPanel, {
			id: "tab2",
			activeTabId: activeTab
		}, t29);
		$[39] = activeTab;
		$[40] = t30;
	} else t30 = $[40];
	let t31;
	let t32;
	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
		t31 = /* @__PURE__ */ React.createElement("h3", null, "Tab 3 Content (Default Lazy)");
		t32 = /* @__PURE__ */ React.createElement("p", null, "This content is lazy loaded by default.");
		$[41] = t31;
		$[42] = t32;
	} else {
		t31 = $[41];
		t32 = $[42];
	}
	let t33;
	if ($[43] !== activeTab) {
		t33 = /* @__PURE__ */ React.createElement(UdpTabPanel, {
			id: "tab3",
			activeTabId: activeTab
		}, t31, t32);
		$[43] = activeTab;
		$[44] = t33;
	} else t33 = $[44];
	let t34;
	if ($[45] !== t28 || $[46] !== t30 || $[47] !== t33) {
		t34 = /* @__PURE__ */ React.createElement("div", { style: t21 }, t28, t30, t33);
		$[45] = t28;
		$[46] = t30;
		$[47] = t33;
		$[48] = t34;
	} else t34 = $[48];
	let t35;
	if ($[49] !== t20 || $[50] !== t34) {
		t35 = /* @__PURE__ */ React.createElement("div", { style: t17 }, t20, t34);
		$[49] = t20;
		$[50] = t34;
		$[51] = t35;
	} else t35 = $[51];
	let t36;
	if ($[52] !== t13 || $[53] !== t16 || $[54] !== t35) {
		t36 = /* @__PURE__ */ React.createElement("div", { style: t8 }, t9, t10, t11, t13, t16, t35);
		$[52] = t13;
		$[53] = t16;
		$[54] = t35;
		$[55] = t36;
	} else t36 = $[55];
	return t36;
};
function _temp(values_0) {
	const errors = {};
	console.log("Validating:", values_0);
	return errors;
}
function _temp2() {
	return console.log("Compound Button Clicked");
}
function _temp3(item) {
	return console.log(item);
}
//#endregion
export { TestStencilWrappedComponentsPage };

//# sourceMappingURL=TestStencilWrappedComponentsPage.mjs.map