import { FluentButton } from "../../UI/inputs/buttons/FluentButton.mjs";
import { FileType } from "./FileType.mjs";
import { c } from "react-compiler-runtime";
import React, { Fragment, useEffect, useRef, useState } from "react";
import { Card, CardContent, Divider, Typography, makeStyles } from "@material-ui/core";
//#region src/utilities/uploader/FileUpload.jsx
const useStyles = makeStyles((theme) => ({
	avatarImage: {
		width: 200,
		height: 200,
		borderRadius: 100,
		border: "3px solid",
		borderColor: theme.palette.primary.main,
		marginTop: -3,
		marginLeft: -3
	},
	image: {
		width: 300,
		height: "100%",
		border: "2px solid",
		borderColor: theme.palette.primary.main,
		marginTop: -3,
		marginLeft: -3
	},
	instruction: {
		display: "flex",
		alignContent: "center",
		justifyContent: "center"
	},
	icon: {
		display: "flex",
		justifyContent: "center"
	},
	avatarIcon: {
		display: "flex",
		justifyContent: "center",
		marginTop: "35%"
	},
	previewCard: { maxWidth: 500 },
	action: {
		marginTop: theme.spacing(1),
		marginBottom: theme.spacing(1),
		display: "flex",
		flexDirection: "row"
	},
	divider: { marginTop: theme.spacing(1) },
	initialInstruction: {
		marginLeft: theme.spacing(2),
		marginTop: theme.spacing(.5)
	}
}));
const FileUpload = (props) => {
	const $ = c(45);
	const [file, setFile] = useState();
	const [previewUrl, setPreviewUrl] = useState();
	const [isValid, setIsValid] = useState(false);
	const [fileType, setFileType] = useState();
	const [fileName, setFileName] = useState();
	const [fileSize, setFileSize] = useState();
	const [fileDate, setFileDate] = useState();
	const { id, onInput, accept, errorText } = props;
	const classes = useStyles();
	const filePickerRef = useRef();
	let t0;
	let t1;
	if ($[0] !== file) {
		t0 = () => {
			if (!file) return;
			const fileReader = new window.FileReader();
			fileReader.onload = () => {
				setPreviewUrl(fileReader.result);
			};
			fileReader.readAsDataURL(file);
		};
		t1 = [file];
		$[0] = file;
		$[1] = t0;
		$[2] = t1;
	} else {
		t0 = $[1];
		t1 = $[2];
	}
	useEffect(t0, t1);
	let t2;
	if ($[3] !== id || $[4] !== isValid || $[5] !== onInput) {
		t2 = (event) => {
			const pickedFile = event.target.files[0];
			let fileIsValid = isValid;
			setFileName(event.target.files[0].name);
			setFileSize(event.target.files[0].size);
			setFileDate(event.target.files[0].lastModifiedDate.toString());
			const str = event.target.files[0].name.split(".")[1];
			setFileType(str);
			if (event.target.files && event.target.files.length === 1) {
				const pickedFile_0 = event.target.files[0];
				setFile(pickedFile_0);
				setIsValid(true);
			} else {
				setIsValid(false);
				fileIsValid = false;
			}
			onInput(id, pickedFile, fileIsValid);
		};
		$[3] = id;
		$[4] = isValid;
		$[5] = onInput;
		$[6] = t2;
	} else t2 = $[6];
	const pickedHandler = t2;
	let formatBytes;
	let pickFileHandler;
	if ($[7] !== file || $[8] !== previewUrl) {
		pickFileHandler = () => {
			filePickerRef.current.click();
			if (file && file !== previewUrl) reset();
		};
		formatBytes = _temp;
		const reset = () => {
			const fileReader_0 = new window.FileReader();
			fileReader_0.onload = () => {
				setPreviewUrl(fileReader_0.result);
			};
			fileReader_0.readAsDataURL(file);
		};
		$[7] = file;
		$[8] = previewUrl;
		$[9] = formatBytes;
		$[10] = pickFileHandler;
	} else {
		formatBytes = $[9];
		pickFileHandler = $[10];
	}
	let t3;
	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
		t3 = { display: "none" };
		$[11] = t3;
	} else t3 = $[11];
	let t4;
	if ($[12] !== accept || $[13] !== id || $[14] !== pickedHandler) {
		t4 = /* @__PURE__ */ React.createElement("input", {
			id,
			ref: filePickerRef,
			style: t3,
			type: "file",
			accept,
			onChange: pickedHandler
		});
		$[12] = accept;
		$[13] = id;
		$[14] = pickedHandler;
		$[15] = t4;
	} else t4 = $[15];
	let t5;
	if ($[16] !== classes.action || $[17] !== classes.initialInstruction || $[18] !== pickFileHandler || $[19] !== previewUrl) {
		t5 = !previewUrl && /* @__PURE__ */ React.createElement("div", { className: classes.action }, /* @__PURE__ */ React.createElement("div", { className: classes.action }, /* @__PURE__ */ React.createElement(FluentButton, {
			type: "button",
			variant: "contained",
			color: "secondary",
			onClick: pickFileHandler
		}, "Select File"), /* @__PURE__ */ React.createElement("div", { className: classes.initialInstruction }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Click 'Select File' to upload a file from your computer"))));
		$[16] = classes.action;
		$[17] = classes.initialInstruction;
		$[18] = pickFileHandler;
		$[19] = previewUrl;
		$[20] = t5;
	} else t5 = $[20];
	let t6;
	if ($[21] !== classes.divider || $[22] !== classes.imagePreview || $[23] !== fileDate || $[24] !== fileName || $[25] !== fileSize || $[26] !== fileType || $[27] !== formatBytes || $[28] !== previewUrl) {
		t6 = previewUrl && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.imagePreview }, /* @__PURE__ */ React.createElement(FileType, {
			fileType,
			image: previewUrl,
			fileName,
			size: formatBytes(fileSize),
			lastModifiedDate: fileDate
		})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, null)));
		$[21] = classes.divider;
		$[22] = classes.imagePreview;
		$[23] = fileDate;
		$[24] = fileName;
		$[25] = fileSize;
		$[26] = fileType;
		$[27] = formatBytes;
		$[28] = previewUrl;
		$[29] = t6;
	} else t6 = $[29];
	let t7;
	if ($[30] !== classes.imageUpload || $[31] !== t5 || $[32] !== t6) {
		t7 = /* @__PURE__ */ React.createElement("div", { className: classes.imageUpload }, t5, t6);
		$[30] = classes.imageUpload;
		$[31] = t5;
		$[32] = t6;
		$[33] = t7;
	} else t7 = $[33];
	let t8;
	if ($[34] !== errorText || $[35] !== isValid) {
		t8 = !isValid && /* @__PURE__ */ React.createElement(Typography, null, errorText, " ");
		$[34] = errorText;
		$[35] = isValid;
		$[36] = t8;
	} else t8 = $[36];
	let t9;
	if ($[37] !== classes.formControl || $[38] !== t4 || $[39] !== t7 || $[40] !== t8) {
		t9 = /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.formControl }, t4, t7, t8));
		$[37] = classes.formControl;
		$[38] = t4;
		$[39] = t7;
		$[40] = t8;
		$[41] = t9;
	} else t9 = $[41];
	let t10;
	if ($[42] !== classes.previewCard || $[43] !== t9) {
		t10 = /* @__PURE__ */ React.createElement(Card, {
			className: classes.previewCard,
			variant: "outlined"
		}, t9);
		$[42] = classes.previewCard;
		$[43] = t9;
		$[44] = t10;
	} else t10 = $[44];
	return t10;
};
function _temp(bytes, t0) {
	const decimals = t0 === void 0 ? 2 : t0;
	if (bytes === 0) return "0 Bytes";
	const dm = decimals < 0 ? 0 : decimals;
	const sizes = [
		"Bytes",
		"KB",
		"MB",
		"GB",
		"TB",
		"PB",
		"EB",
		"ZB",
		"YB"
	];
	const i = Math.floor(Math.log(bytes) / Math.log(1024));
	return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + " " + sizes[i];
}
//#endregion
export { FileUpload };

//# sourceMappingURL=FileUpload.mjs.map