try {
	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "f69ad437-36f8-4db1-a923-8bcf19af6f49", e._sentryDebugIdIdentifier = "sentry-dbid-f69ad437-36f8-4db1-a923-8bcf19af6f49");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-Br5wIPO-.js";
import { t as Button } from "./Button-BDEdGXnd.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-DfTXpZbA.js";
import { a as StateContextSetter, i as bytesToSize, n as fileValidationRules, r as DropzoneFile, t as defaultFileValidationOptions } from "./validate-DlG5LXuM.js";
import { t as useForm } from "./useForm-DzG9tJAE.js";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/molecules/Dropzone/Dropzone.tsx
function Dropzone(props) {
	const { name, label = "", multiple = false, disabled = false, required = true, defaultData, id, isOptional = false, maxNumberOfFiles = defaultFileValidationOptions.maxNumberOfFiles, maxSize = defaultFileValidationOptions.maxSize, allowedFileTypes = defaultFileValidationOptions.allowedFileTypes, showMinimal, hidePageCount, onChange: propsOnChange, handleFieldChange, errors: errorProp, fieldValidationErrors, valid: validProp, enableTracking = false, extraDropzoneDescription } = props;
	const { t } = useTranslation("ui");
	const userEvents = useAnalyticsContext();
	const fileInput = useRef(null);
	const [dragged, setDragged] = useState(false);
	const stateRef = useRef({ setState: null });
	const rules = useMemo(() => fileValidationRules({
		maxSize,
		allowedFileTypes,
		maxNumberOfFiles,
		isOptional
	}), [
		allowedFileTypes,
		isOptional,
		maxNumberOfFiles,
		maxSize
	]);
	const form = useForm({
		...props,
		schema: [name],
		defaultData: defaultData || [],
		rules: { [name]: rules }
	});
	let { data, valid, errors, fieldProblems, handleChangeFor } = form;
	const { setValid, setData, isValid, triggerValidation } = form;
	if (handleFieldChange) {
		handleChangeFor = handleFieldChange;
		data = defaultData;
		errors = errorProp;
		valid = validProp;
		fieldProblems = fieldValidationErrors;
	}
	const isRequired = errors?.[name]?.errorMessage === "fieldIsRequired";
	const allowedFiletypes = allowedFileTypes.join(", ");
	const hasMaxNumberOfFiles = data?.[name]?.length >= maxNumberOfFiles;
	useEffect(() => {
		stateRef?.current?.setState?.({
			type: "addToState",
			value: {
				data,
				valid,
				errors,
				fieldProblems,
				dataStoreId: id
			}
		});
	}, [
		data,
		valid,
		errors,
		isValid
	]);
	const selectFile = () => fileInput.current?.click();
	const handleFileDelete = (fileToDelete) => {
		handleChangeFor(name, "input")(data?.[name]?.filter((file) => file !== fileToDelete));
	};
	const handleDragEnter = (e) => {
		e.preventDefault();
		e.stopPropagation();
	};
	const handleDragLeave = (e) => {
		if (disabled) return;
		e.preventDefault();
		e.stopPropagation();
		setDragged(false);
	};
	const handleDragOver = (e) => {
		if (disabled) return;
		e.preventDefault();
		e.stopPropagation();
		setDragged(true);
	};
	const handleDrop = (e) => {
		if (disabled) return;
		e.preventDefault();
		e.stopPropagation();
		if (e.dataTransfer) updateFiles(e.dataTransfer);
		setDragged(false);
	};
	const handleFileChange = (e) => {
		updateFiles(e.currentTarget);
	};
	const updateFiles = ({ files }) => {
		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
			actionType: "change",
			field: name || "file picker"
		});
		const currentFiles = data?.[name] || [];
		handleChangeFor(name, "input")([...currentFiles, ...files ?? []]);
	};
	useEffect(() => {
		const currentFiles = data?.[name] || [];
		if (isValid) propsOnChange?.([...currentFiles]);
	}, [isValid, data]);
	useEffect(() => {
		if (defaultData?.[name]?.[0]) {
			setData(name, defaultData?.[name]);
			triggerValidation();
		} else setData(name, null);
	}, [defaultData]);
	useEffect(() => {
		const currentFiles = data?.[name];
		const hasFiles = currentFiles && currentFiles.length > 0;
		if (isOptional && !hasFiles) setValid(name, true);
	}, [isOptional, data]);
	const files = data?.[name] || [];
	return /* @__PURE__ */ jsxs("div", { children: [
		/* @__PURE__ */ jsx(StateContextSetter, { stateRef }),
		label && /* @__PURE__ */ jsx("div", {
			className: cx("adyen-kyc-label__text", { "adyen-kyc-label__text--error": isRequired }),
			children: label
		}),
		files.map((file) => /* @__PURE__ */ jsx(DropzoneFile, {
			file,
			onDelete: () => {
				handleFileDelete(file);
			},
			errorMessage: errors?.[name]?.errorMessage
		}, file)),
		!hasMaxNumberOfFiles && /* @__PURE__ */ jsxs("div", {
			role: "region",
			className: cx("adyen-kyc-dropzone", {
				"adyen-kyc-dropzone--dragged": dragged,
				"adyen-kyc-dropzone--error": !dragged && isRequired
			}),
			onDrop: handleDrop,
			onDragOver: handleDragOver,
			onDragEnter: handleDragEnter,
			onDragLeave: handleDragLeave,
			children: [/* @__PURE__ */ jsx(InnerContent, {
				multiple,
				disabled,
				showMinimal,
				hidePageCount,
				extraDropzoneDescription,
				maxSize,
				maxNumberOfFiles,
				allowedFiletypes,
				selectFile
			}), /* @__PURE__ */ jsx("input", {
				className: "adyen-kyc-dropzone__input",
				ref: fileInput,
				disabled,
				multiple,
				accept: allowedFiletypes,
				onChange: handleFileChange,
				type: "file",
				"aria-required": required,
				"aria-label": label,
				"aria-invalid": !valid,
				"data-testid": "dropzone-input"
			})]
		}),
		isRequired && /* @__PURE__ */ jsx("div", {
			className: "adyen-kyc-error-text",
			children: t(($) => $["fieldIsRequired"])
		})
	] });
}
function InnerContent({ multiple, disabled, showMinimal, hidePageCount, extraDropzoneDescription, maxSize, maxNumberOfFiles, allowedFiletypes, selectFile }) {
	const { t } = useTranslation("ui");
	if (showMinimal) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
		className: "adyen-kyc-dropzone__button",
		children: /* @__PURE__ */ jsx(Button, {
			onClick: selectFile,
			disabled,
			fullWidth: true,
			children: t(($) => $["browseFiles"])
		})
	}), /* @__PURE__ */ jsxs("div", {
		className: "adyen-kyc-dropzone__extras",
		children: [/* @__PURE__ */ jsx(Typography, {
			color: "secondary",
			children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes })
		}), /* @__PURE__ */ jsx(Typography, {
			color: "secondary",
			children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], { maxSize: bytesToSize(maxSize) })
		})]
	})] });
	return /* @__PURE__ */ jsxs(Fragment, { children: [
		/* @__PURE__ */ jsx("div", {
			className: "adyen-kyc-dropzone__icon",
			children: /* @__PURE__ */ jsx(Icon, { name: "upload" })
		}),
		/* @__PURE__ */ jsxs("div", {
			className: "adyen-kyc-dropzone__labels",
			children: [
				/* @__PURE__ */ jsx(Typography, {
					el: "h4",
					variant: "body-strongest",
					children: t(($) => $[multiple ? "dropFilesToUpload" : "dropFileToUpload"])
				}),
				extraDropzoneDescription && /* @__PURE__ */ jsx(Typography, {
					color: "secondary",
					children: extraDropzoneDescription
				}),
				/* @__PURE__ */ jsx(Typography, {
					color: "secondary",
					children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes })
				}),
				/* @__PURE__ */ jsx(Typography, {
					color: "secondary",
					children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], { maxSize: bytesToSize(maxSize) })
				}),
				/* @__PURE__ */ jsx(Typography, {
					color: "secondary",
					children: t(($) => $["upToFiles"], { maxFiles: maxNumberOfFiles })
				})
			]
		}),
		/* @__PURE__ */ jsx("div", {
			className: "adyen-kyc-dropzone__button",
			children: /* @__PURE__ */ jsx(Button, {
				onClick: selectFile,
				variant: "secondary",
				children: t(($) => $["browseFiles"])
			})
		})
	] });
}
//#endregion
export { Dropzone as t };
