import { getIconFromName } from "../../../utilities/tree/TreeUtilities.mjs";
import { AmbientCard } from "../../surfaces/cards/AmbientCard/AmbientCard.mjs";
import { IconButtonWithTooltip } from "../../inputs/buttons/IconButtonWithToolTip.mjs";
import { ImageFooter } from "./ImageFooter.mjs";
import { Image } from "./Image.mjs";
import { ImageViewerSideSheet } from "./ImageViewerSideSheet.mjs";
import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Dialog, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
//#region src/UI/fileViewer/imageSlider/ImageSlider.jsx
const useStyles = makeStyles((theme) => ({
	root: { backgroundColor: theme.palette.background.paper },
	imagesWrapper: {
		display: "flex",
		width: "100%",
		height: "100%",
		overflow: "hidden",
		alignItems: "center"
	},
	imageSection: {
		width: "100%",
		height: "100%"
	},
	image: {
		objectFit: "contain",
		display: "block",
		flexShrink: 0,
		flexGrow: 0,
		transition: "translate 300ms ease-in-out"
	},
	openSideSheetIcon: {
		display: "block",
		position: "absolute",
		top: (props) => props?.title ? 64 : 8,
		right: 8,
		zIndex: 3,
		backgroundColor: theme.palette.background.paper
	},
	dialogContent: {
		overflow: "hidden",
		width: "100vw",
		height: "100vh",
		display: "flex",
		flexDirection: "column"
	},
	closeDialog: { margin: theme.spacing(1) },
	dialogImageSection: {
		flex: 2,
		height: "100%"
	}
}));
const defaultFieldMapping = {
	filePath: "filePath",
	fileName: "fileName",
	primaryText: "primaryText",
	secondaryText: "secondaryText"
};
const ImageSlider = (props) => {
	const $ = c(48);
	const { title, images, fieldMapping: t0, sideSheetTitle, sideSheetWidth, hideDownload, hidePrimaryText, hideSecondaryText, hidePrimaryTextInExpandMode, hideSecondaryTextInExpandMode, expandInSideSheet: t1 } = props;
	const fieldMapping = t0 === void 0 ? defaultFieldMapping : t0;
	const expandInSideSheet = t1 === void 0 ? true : t1;
	const classes = useStyles(props);
	const { t } = useTranslation();
	const [currentImageIndex, setCurrentImageIndex] = useState(0);
	const [openSideSheet, setOpenSideSheet] = useState(false);
	let t2;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = (t3) => {
			if (t3 === void 0 ? false : t3) setCurrentImageIndex(_temp);
			else setCurrentImageIndex(_temp2);
		};
		$[0] = t2;
	} else t2 = $[0];
	const handleViewImage = t2;
	let t3;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = () => {
			setOpenSideSheet(true);
		};
		$[1] = t3;
	} else t3 = $[1];
	const handleExpandImage = t3;
	let t4;
	bb0: {
		const imgObj = images?.[currentImageIndex];
		if (!imgObj) {
			let t5;
			if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
				t5 = {};
				$[2] = t5;
			} else t5 = $[2];
			t4 = t5;
			break bb0;
		}
		const t5 = imgObj[fieldMapping?.filePath];
		const t6 = imgObj[fieldMapping?.fileName];
		const t7 = imgObj[fieldMapping?.primaryText];
		const t8 = imgObj[fieldMapping?.secondaryText];
		let t9;
		if ($[3] !== t5 || $[4] !== t6 || $[5] !== t7 || $[6] !== t8) {
			t9 = {
				filePath: t5,
				fileName: t6,
				primaryText: t7,
				secondaryText: t8
			};
			$[3] = t5;
			$[4] = t6;
			$[5] = t7;
			$[6] = t8;
			$[7] = t9;
		} else t9 = $[7];
		t4 = t9;
	}
	const currentImageObj = t4;
	let t5;
	if ($[8] !== classes.image || $[9] !== currentImageIndex || $[10] !== fieldMapping?.fileName || $[11] !== fieldMapping?.filePath || $[12] !== images) {
		t5 = images?.map((image) => /* @__PURE__ */ React.createElement("img", {
			src: image?.[fieldMapping?.filePath],
			alt: `${image?.[fieldMapping?.fileName]}`,
			loading: "lazy",
			width: "100%",
			height: "auto",
			className: classes.image,
			style: { translate: `${-100 * currentImageIndex}%` }
		}));
		$[8] = classes.image;
		$[9] = currentImageIndex;
		$[10] = fieldMapping?.fileName;
		$[11] = fieldMapping?.filePath;
		$[12] = images;
		$[13] = t5;
	} else t5 = $[13];
	let t6;
	if ($[14] !== classes.imagesWrapper || $[15] !== t5) {
		t6 = /* @__PURE__ */ React.createElement("div", { className: classes.imagesWrapper }, t5);
		$[14] = classes.imagesWrapper;
		$[15] = t5;
		$[16] = t6;
	} else t6 = $[16];
	let t7;
	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
		t7 = getIconFromName("MiniExpand");
		$[17] = t7;
	} else t7 = $[17];
	let t8;
	if ($[18] !== t) {
		t8 = t("Expand Image");
		$[18] = t;
		$[19] = t8;
	} else t8 = $[19];
	let t9;
	if ($[20] !== classes.openSideSheetIcon || $[21] !== t8) {
		t9 = /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
			icon: t7,
			title: t8,
			onClick: handleExpandImage,
			id: "udpRecord-ImageSlider-ExpandBtn",
			udprecordid: "udpRecord-ImageSlider-ExpandBtn",
			className: classes.openSideSheetIcon
		});
		$[20] = classes.openSideSheetIcon;
		$[21] = t8;
		$[22] = t9;
	} else t9 = $[22];
	let t10;
	if ($[23] !== currentImageIndex || $[24] !== currentImageObj || $[25] !== hidePrimaryText || $[26] !== hideSecondaryText || $[27] !== images) {
		t10 = /* @__PURE__ */ React.createElement(ImageFooter, {
			images,
			currentImageObj,
			hidePrimaryText,
			hideSecondaryText,
			handleViewImage,
			currentImageIndex
		});
		$[23] = currentImageIndex;
		$[24] = currentImageObj;
		$[25] = hidePrimaryText;
		$[26] = hideSecondaryText;
		$[27] = images;
		$[28] = t10;
	} else t10 = $[28];
	let t11;
	if ($[29] !== classes.closeDialog || $[30] !== classes.dialogContent || $[31] !== classes.dialogImageSection || $[32] !== currentImageObj || $[33] !== expandInSideSheet || $[34] !== hideDownload || $[35] !== hidePrimaryTextInExpandMode || $[36] !== hideSecondaryTextInExpandMode || $[37] !== openSideSheet || $[38] !== sideSheetTitle || $[39] !== sideSheetWidth || $[40] !== t) {
		t11 = expandInSideSheet ? /* @__PURE__ */ React.createElement(ImageViewerSideSheet, {
			title: sideSheetTitle,
			open: openSideSheet,
			onClose: () => {
				setOpenSideSheet(false);
			},
			imageObj: currentImageObj,
			width: sideSheetWidth,
			hideDownload,
			hidePrimaryText: hidePrimaryTextInExpandMode,
			hideSecondaryText: hideSecondaryTextInExpandMode
		}) : /* @__PURE__ */ React.createElement(Dialog, {
			onClose: () => {
				setOpenSideSheet(false);
			},
			open: openSideSheet,
			fullScreen: true
		}, /* @__PURE__ */ React.createElement("div", { className: classes.dialogContent }, /* @__PURE__ */ React.createElement("div", { className: classes.closeDialog }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
			icon: getIconFromName("Cancel"),
			title: t("Close"),
			onClick: () => {
				setOpenSideSheet(false);
			},
			id: "udpRecord-ImageSlider-PreviousBtn",
			udprecordid: "udpRecord-ImageSlider-PreviousBtn"
		})), /* @__PURE__ */ React.createElement("div", { className: classes.dialogImageSection }, /* @__PURE__ */ React.createElement(Image, {
			imageObj: currentImageObj,
			hidePrimaryText: hidePrimaryTextInExpandMode,
			hideSecondaryText: hideSecondaryTextInExpandMode
		}))));
		$[29] = classes.closeDialog;
		$[30] = classes.dialogContent;
		$[31] = classes.dialogImageSection;
		$[32] = currentImageObj;
		$[33] = expandInSideSheet;
		$[34] = hideDownload;
		$[35] = hidePrimaryTextInExpandMode;
		$[36] = hideSecondaryTextInExpandMode;
		$[37] = openSideSheet;
		$[38] = sideSheetTitle;
		$[39] = sideSheetWidth;
		$[40] = t;
		$[41] = t11;
	} else t11 = $[41];
	let t12;
	if ($[42] !== t10 || $[43] !== t11 || $[44] !== t6 || $[45] !== t9 || $[46] !== title) {
		t12 = /* @__PURE__ */ React.createElement(AmbientCard, {
			fullWidth: true,
			title,
			removePadding: true,
			lastChildBottomPadding: "0px",
			removeTopLayoutUnit: true
		}, t6, t9, t10, t11);
		$[42] = t10;
		$[43] = t11;
		$[44] = t6;
		$[45] = t9;
		$[46] = title;
		$[47] = t12;
	} else t12 = $[47];
	return t12;
};
function _temp(prev) {
	return prev - 1;
}
function _temp2(prev_0) {
	return prev_0 + 1;
}
//#endregion
export { ImageSlider };

//# sourceMappingURL=ImageSlider.mjs.map