/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1fc5ad1 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
import { useProviderProps } from "../../../provider.js";
import { Action } from "../../actions/Action/Action.js";
import { useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { wrapWithField } from "../../form/wrapper.js";
import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { createFocusableRef } from "@react-spectrum/utils";

//#region src/components/fields/FileInput/FileInput.tsx
const FileInputElement = tasty(Action, {
	qa: "FileInputWrapper",
	styles: {
		display: "inline-flex",
		position: "relative",
		preset: "t3",
		padding: ".5x 1x",
		gap: "1x",
		flow: "row",
		placeItems: "center start",
		fill: {
			"": "#white",
			"drag-hover": "#primary.16",
			":hover": "#primary.08",
			disabled: "#dark.04"
		},
		border: {
			"": true,
			":focus-within & :focus-visible": "#primary-text"
		},
		radius: true,
		cursor: "$pointer",
		overflow: "hidden",
		whiteSpace: "nowrap",
		Button: {
			radius: true,
			border: {
				"": "#clear",
				pressed: "#primary.30"
			},
			fill: "#primary.12",
			color: {
				"": "#primary",
				disabled: "#dark.30"
			},
			padding: ".5x (1.5x - 1px)",
			transition: "theme"
		},
		Placeholder: {
			color: "#dark-02",
			whiteSpace: "nowrap",
			textOverflow: "ellipsis",
			width: "max 100%",
			overflow: "hidden"
		},
		Value: {
			color: "#dark-02",
			whiteSpace: "nowrap",
			textOverflow: "ellipsis",
			width: "max 100%",
			overflow: "hidden"
		},
		Input: {
			position: "absolute",
			top: 0,
			right: 0,
			bottom: 0,
			left: 0,
			radius: "$content-radius",
			opacity: .01,
			cursor: "$pointer",
			zIndex: 10
		}
	}
});
function extractContents(element, callback) {
	const files = element?.files;
	if (files && files.length > 0) {
		const fileReader = new FileReader();
		fileReader.onload = function() {
			callback(fileReader.result);
		};
		fileReader.readAsText(files[0]);
	}
}
function extractFileNameFromValue(value) {
	return typeof value === "string" ? value.split("\\")?.pop() : void 0;
}
function FileInput(props, ref) {
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps({ ...props }, {
		defaultValidationTrigger: "onChange",
		valuePropsMapper: ({ value, onChange }) => ({
			onChange,
			value: props.type === "file" || !props.type ? value : void 0
		})
	});
	let { id, name, qa, value, onChange, placeholder, inputRef, isDisabled, inputStyles, type = "file", inputProps, accept, form, ...otherProps } = props;
	const [dragHover, setDragHover] = useState(false);
	const defaultValue = useMemo(() => type === "file" ? value : void 0, [type, value]);
	const [fileName, setFileName] = useState(useMemo(() => extractFileNameFromValue(defaultValue), []));
	let domRef = useRef(null);
	inputRef = useCombinedRefs(inputRef);
	const onLocalChange = useCallback((event) => {
		const value = event.target.value;
		setFileName(extractFileNameFromValue(value));
		if (type === "file") onChange?.(value);
		else extractContents(event.target, onChange);
	}, [onChange]);
	extractStyles(otherProps, CONTAINER_STYLES);
	useImperativeHandle(ref, () => ({
		...createFocusableRef(domRef, inputRef),
		select() {
			if (inputRef?.current) inputRef.current.select();
		},
		getInputElement() {
			return inputRef?.current;
		}
	}));
	return wrapWithField(/* @__PURE__ */ jsxs(FileInputElement, {
		ref: domRef,
		styles: inputStyles,
		isDisabled,
		mods: {
			selected: !!value,
			"drag-hover": dragHover
		},
		onKeyDown: (e) => {
			if (e.key === "Enter" || e.key === "Space") inputRef?.current?.click();
		},
		children: [
			/* @__PURE__ */ jsx("input", {
				ref: inputRef,
				id,
				name,
				accept,
				"data-qa": qa || "FileInput",
				"data-input-type": "fileinput",
				"data-element": "Input",
				disabled: isDisabled,
				type: "file",
				multiple: false,
				tabIndex: -1,
				onChange: onLocalChange,
				onDragEnter: () => {
					setDragHover(true);
				},
				onDragLeave: () => {
					setDragHover(false);
				},
				onDrop: () => {
					setDragHover(false);
				},
				...inputProps
			}),
			/* @__PURE__ */ jsx("div", {
				"data-element": "Button",
				children: "Choose file"
			}),
			/* @__PURE__ */ jsx("div", {
				"data-element": fileName ? "Value" : "Placeholder",
				children: fileName || placeholder || "No file selected"
			})
		]
	}), domRef, { ...props });
}
/**
* FileInputs are file inputs that allow users to select local files to
* upload them to the server.
*/
const _FileInput = forwardRef(FileInput);
_FileInput.displayName = "FileInput";

//#endregion
export { _FileInput };
//# sourceMappingURL=FileInput.js.map