'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');
var React = require('react');
var md = require('react-icons/md');
var Avatars = require('../../Avatars/Avatars.cjs');

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
function Dropzone({
  setRawString,
  fileUploadLogo,
  fileUploadText,
  fileUploadDescription,
  fileUploadedLogo,
  fileUploadedText,
  fileRemoveText
}) {
  const [dragActive, setDragActive] = React.useState(false);
  const [file, setFile] = React.useState();
  const inputRef = React.useRef(null);
  const formRef = React.useRef(null);
  const handleFile = (file2) => __async(this, null, function* () {
    const string = yield file2.text();
    setFile(file2);
    setRawString(string);
  });
  const handleDrag = (event) => {
    event.preventDefault();
    event.stopPropagation();
    if (event.type === "dragenter" || event.type === "dragover") {
      setDragActive(true);
    } else if (event.type === "dragleave") {
      setDragActive(false);
    }
  };
  const handleDrop = (event) => __async(this, null, function* () {
    var _a, _b;
    event.preventDefault();
    event.stopPropagation();
    setDragActive(false);
    if (((_b = (_a = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b.length) > 0) {
      void handleFile(event.dataTransfer.files[0]);
    }
  });
  const handleChange = (event) => {
    var _a, _b, _c;
    event.preventDefault();
    if (((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.files) && ((_c = (_b = event == null ? void 0 : event.target) == null ? void 0 : _b.files) == null ? void 0 : _c.length) > 0) {
      void handleFile(event.target.files[0]);
    }
  };
  const onButtonClick = () => {
    var _a;
    (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
  };
  const cleanState = () => {
    var _a;
    setFile(void 0);
    setRawString(void 0);
    (_a = formRef == null ? void 0 : formRef.current) == null ? void 0 : _a.reset();
  };
  return /* @__PURE__ */ jsxRuntime.jsx(
    react.FormControl,
    {
      mt: 4,
      id: "form-file-upload",
      onDragEnter: handleDrag,
      onSubmit: (e) => e.preventDefault(),
      borderRadius: 10,
      height: "10vw",
      ref: formRef,
      as: "form",
      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { justifyContent: "center", alignItems: "center", h: "100%", direction: "column", children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          react.Input,
          {
            ref: inputRef,
            type: "file",
            id: "input-file-upload",
            onChange: handleChange,
            multiple: false,
            display: "none"
          }
        ),
        file === void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "center", direction: "column", children: [
          fileUploadLogo || /* @__PURE__ */ jsxRuntime.jsx(
            react.chakra.img,
            {
              "data-testid": "upload-file-logo",
              src: Avatars.uploadFileSvg,
              mb: 5,
              alt: "upload-file-logo"
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { textAlign: "center", children: [
            /* @__PURE__ */ jsxRuntime.jsx(react.Button, { variant: "link", onClick: onButtonClick, children: fileUploadText || "Click to upload" }),
            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: " or drag and drop a file here" }),
            /* @__PURE__ */ jsxRuntime.jsx(react.Center, { children: fileUploadDescription })
          ] })
        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          fileUploadedLogo || /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: md.MdCloudDone, color: "green.500", w: "20", h: "20" }),
          fileUploadedText || /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { children: [
            file.name,
            " successfully uploaded"
          ] }),
          /* @__PURE__ */ jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: cleanState, children: fileRemoveText || /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "u", children: "Remove file" }) })
        ] }),
        dragActive && /* @__PURE__ */ jsxRuntime.jsx(
          react.Box,
          {
            position: "absolute",
            w: "100%",
            h: "100%",
            top: "0",
            bottom: "0",
            right: "0",
            left: "0",
            id: "drag-file-element",
            onDragEnter: handleDrag,
            onDragLeave: handleDrag,
            onDragOver: handleDrag,
            onDrop: handleDrop
          }
        )
      ] })
    }
  );
}

module.exports = Dropzone;
//# sourceMappingURL=Dropzone.cjs.map
