import {
  InputSubtext,
  inputBlockStyle
} from "../chunk-ATUH6SXK.js";
import {
  Pill
} from "../chunk-A4FQBEYU.js";
import "../chunk-J4FJQ3FN.js";
import "../chunk-3GS5EFXV.js";
import "../chunk-55OQPFLF.js";
import "../chunk-FCZJILMW.js";
import {
  Icon
} from "../chunk-RWIZ7Q74.js";
import "../chunk-LAMQKQU3.js";
import "../chunk-JK4BP73A.js";
import "../chunk-2VBDEO6M.js";
import "../chunk-E4EXM4SY.js";
import "../chunk-JSGRNWSB.js";
import "../chunk-CIGAQ47A.js";

// src/components/FileInput.tsx
import styled from "@emotion/styled";
import { Fragment, useRef, useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function FileInput({
  name,
  onChange,
  filePurpose = "",
  onRemoveFile
}) {
  const [fileName, setFileName] = useState();
  const [fileContent, setFileContent] = useState();
  const [fileErrorMsg, setFileErrorMsg] = useState();
  const fileInputRef = useRef(null);
  const handleChange = (changeEvent) => {
    var _a;
    const file = (_a = changeEvent.target.files) == null ? void 0 : _a[0];
    if (!file) {
      return;
    }
    const reader = new FileReader();
    reader.onload = (readEvent) => {
      var _a2;
      let fileContent2 = (_a2 = readEvent == null ? void 0 : readEvent.target) == null ? void 0 : _a2.result;
      setFileName(file.name);
      if (!fileContent2) {
        setFileErrorMsg("Unable to read file");
        return;
      }
      if (typeof fileContent2 !== "string") {
        fileContent2 = new TextDecoder().decode(fileContent2);
      }
      setFileErrorMsg(void 0);
      setFileContent(fileContent2);
      onChange(fileContent2);
    };
    reader.readAsText(file);
  };
  function handleRemoveFile() {
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
    setFileName(void 0);
    setFileContent(void 0);
    setFileErrorMsg(void 0);
    onRemoveFile();
  }
  return /* @__PURE__ */ jsxs(StyledFileInputContainer, { children: [
    /* @__PURE__ */ jsxs(StyledFileInput, { hasValidFileSet: Boolean(fileName && fileContent), children: [
      /* @__PURE__ */ jsx("label", { htmlFor: name, children: fileName && fileContent ? /* @__PURE__ */ jsx(
        Pill,
        {
          text: fileName,
          cursor: "pointer",
          onDeleteMouseDown: handleRemoveFile,
          onDeleteFromKeyboard: handleRemoveFile
        }
      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(Icon, { name: "Upload", width: 26, tutorialStep: 6 }),
        "Upload ",
        filePurpose || "",
        " file"
      ] }) }),
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "file",
          id: name,
          onChange: handleChange,
          ref: fileInputRef
        }
      )
    ] }),
    fileErrorMsg ? /* @__PURE__ */ jsx(InputSubtext, { text: fileErrorMsg, hasError: true }) : null
  ] });
}
var StyledFileInputContainer = styled.div``;
var StyledFileInput = styled.div`
  input[type="file"] {
    display: none;
  }

  label {
    display: block;
    cursor: pointer;
    ${({ theme, hasValidFileSet }) => inputBlockStyle({ theme, hasValue: hasValidFileSet, hasError: false })}
  }
`;
export {
  FileInput,
  StyledFileInput
};
