Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_fields = require("../styles/fields.cjs");
const require_components_Pill = require("./Pill.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/FileInput.tsx
function FileInput({ name, onChange, filePurpose = "", onRemoveFile }) {
	const [fileName, setFileName] = (0, react.useState)();
	const [fileContent, setFileContent] = (0, react.useState)();
	const [fileErrorMsg, setFileErrorMsg] = (0, react.useState)();
	const fileInputRef = (0, react.useRef)(null);
	const handleChange = (changeEvent) => {
		const file = changeEvent.target.files?.[0];
		if (!file) return;
		const reader = new FileReader();
		reader.onload = (readEvent) => {
			let fileContent = readEvent?.target?.result;
			setFileName(file.name);
			if (!fileContent) {
				setFileErrorMsg("Unable to read file");
				return;
			}
			if (typeof fileContent !== "string") fileContent = new TextDecoder().decode(fileContent);
			setFileErrorMsg(void 0);
			setFileContent(fileContent);
			onChange(fileContent);
		};
		reader.readAsText(file);
	};
	function handleRemoveFile() {
		if (fileInputRef.current) fileInputRef.current.value = "";
		setFileName(void 0);
		setFileContent(void 0);
		setFileErrorMsg(void 0);
		onRemoveFile();
	}
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledFileInputContainer, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledFileInput, {
		hasValidFileSet: Boolean(fileName && fileContent),
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("label", {
			htmlFor: name,
			children: fileName && fileContent ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Pill.Pill, {
				text: fileName,
				cursor: "pointer",
				onDeleteMouseDown: handleRemoveFile,
				onDeleteFromKeyboard: handleRemoveFile
			}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [
				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: "Upload",
					width: 26,
					tutorialStep: 6
				}),
				"Upload ",
				filePurpose || "",
				" file"
			] })
		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("input", {
			type: "file",
			id: name,
			onChange: handleChange,
			ref: fileInputRef
		})]
	}), fileErrorMsg ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_styles_fields.InputSubtext, {
		text: fileErrorMsg,
		hasError: true
	}) : null] });
}
const StyledFileInputContainer = _emotion_styled.default.div``;
const StyledFileInput = _emotion_styled.default.div`
  input[type="file"] {
    display: none;
  }

  label {
    display: block;
    cursor: pointer;
    ${({ theme, hasValidFileSet }) => require_styles_fields.inputBlockStyle({
	theme,
	hasValue: hasValidFileSet,
	hasError: false
})}
  }
`;
//#endregion
exports.FileInput = FileInput;
exports.StyledFileInput = StyledFileInput;
