import { FluentButton } from "../UI/inputs/buttons/FluentButton.mjs";
import { FluentIcon } from "../utilities/iconLibrary/FluentIcon.mjs";
import { formatBytes } from "../utilities/uploader/formatBytes.mjs";
import React, { useMemo } from "react";
import { Typography, lighten, makeStyles } from "@material-ui/core";
import { PageIcon } from "@fluentui/react-icons";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { useDropzone } from "react-dropzone";
//#region src/uploader/DragDropFileUpload.jsx
const useStyles = makeStyles((theme) => ({
	btnWrapper: {
		display: "flex",
		justifyContent: "center",
		gap: theme.spacing(2),
		marginTop: theme.spacing(1),
		marginBottom: theme.spacing(1)
	},
	dndWrapper: {
		backgroundColor: lighten(theme.palette.secondary.light, .8),
		height: "100%",
		minHeight: (props) => props?.minHeight,
		maxHeight: (props) => props?.maxHeight,
		display: "flex",
		alignItems: "center",
		textAlign: "center",
		border: `dashed 2px ${lighten(theme.palette.secondary.light, .4)}`,
		overflow: "hidden"
	},
	fileNameWrapper: {
		display: "flex",
		gap: theme.spacing(1),
		alignItems: "center",
		textAlign: "center",
		justifyContent: "center"
	},
	dndContent: {
		flexGrow: 1,
		textAlign: "center"
	},
	textWrapper: {
		overflow: "hidden",
		marginRight: theme.spacing(2),
		marginLeft: theme.spacing(2)
	}
}));
const DragDropFileUpload = (props) => {
	const { title, handleUploadFile, hideSelectFileButton = false, hideFilePreview = false, minHeight, maxHeight, multiple = false, maxFileSize, ...otherDropZoneProps } = props;
	const { t } = useTranslation();
	const classes = useStyles({
		minHeight,
		maxHeight
	});
	const { open, acceptedFiles, getRootProps, getInputProps, fileRejections } = useDropzone({
		noClick: true,
		noKeyboard: true,
		multiple,
		onDrop: handleUploadFile,
		maxSize: maxFileSize,
		...otherDropZoneProps
	});
	const files = useMemo(() => {
		return acceptedFiles.map((file) => /* @__PURE__ */ React.createElement("div", { className: classes.fileNameWrapper }, /* @__PURE__ */ React.createElement(FluentIcon, {
			size: "small",
			component: PageIcon
		}), /* @__PURE__ */ React.createElement(Typography, null, ` ${file?.path} (${formatBytes(file?.size)})`)));
	}, [acceptedFiles]);
	const rejectedFilesExceedingMaxFileSize = useMemo(() => {
		return fileRejections?.filter(({ errors }) => errors.some((error) => error.code === "file-too-large")).map(({ file }) => /* @__PURE__ */ React.createElement("div", {
			className: classes.fileNameWrapper,
			key: file.path || file.name
		}, /* @__PURE__ */ React.createElement(FluentIcon, {
			size: "small",
			component: PageIcon
		}), /* @__PURE__ */ React.createElement(Typography, { color: "error" }, `${file?.path || file?.name} (${formatBytes(file?.size)}): File size exceeds ${maxFileSize} Bytes`)));
	}, [fileRejections]);
	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
		...getRootProps({ className: "dropzone" }),
		className: classes.dndWrapper
	}, /* @__PURE__ */ React.createElement("div", { className: classes.dndContent }, /* @__PURE__ */ React.createElement("input", getInputProps()), /* @__PURE__ */ React.createElement(Typography, { className: classes.textWrapper }, title ? title : multiple ? t("Drag and drop files here or select files") : t("Drag and drop a file here or select a file")), !hideSelectFileButton && /* @__PURE__ */ React.createElement("div", { className: classes.btnWrapper }, /* @__PURE__ */ React.createElement(FluentButton, {
		onClick: open,
		color: "secondary",
		variant: "contained"
	}, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, multiple ? t("Select Files") : t("Select a File")))), !hideFilePreview && /* @__PURE__ */ React.createElement("div", null, files), maxFileSize && rejectedFilesExceedingMaxFileSize.length > 0 && /* @__PURE__ */ React.createElement("div", null, rejectedFilesExceedingMaxFileSize))));
};
DragDropFileUpload.propTypes = {
	title: PropTypes.string,
	handleUploadFile: PropTypes.func,
	hideSelectFileButton: PropTypes.bool,
	hideFilePreview: PropTypes.bool,
	minHeight: PropTypes.string | PropTypes.number,
	maxHeight: PropTypes.string | PropTypes.number,
	multiple: PropTypes.bool
};
//#endregion
export { DragDropFileUpload };

//# sourceMappingURL=DragDropFileUpload.mjs.map