import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_react_icons_md__ from "react-icons/md";
import * as __WEBPACK_EXTERNAL_MODULE__Avatars_Avatars_mjs__ from "../../Avatars/Avatars.mjs";
function Dropzone({ setRawString, fileUploadLogo, fileUploadText, fileUploadDescription, fileUploadedLogo, fileUploadedText, fileRemoveText }) {
    // drag state
    const [dragActive, setDragActive] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [file, setFile] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
    // ref
    const inputRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const formRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const handleFile = async (file)=>{
        const string = await file.text();
        setFile(file);
        setRawString(string);
    };
    // handle drag events
    const handleDrag = (event)=>{
        event.preventDefault();
        event.stopPropagation();
        if ('dragenter' === event.type || 'dragover' === event.type) setDragActive(true);
        else if ('dragleave' === event.type) setDragActive(false);
    };
    // triggers when file is dropped
    const handleDrop = async (event)=>{
        event.preventDefault();
        event.stopPropagation();
        setDragActive(false);
        if (event?.dataTransfer?.files?.length > 0) handleFile(event.dataTransfer.files[0]);
    };
    // triggers when file is selected with click
    const handleChange = (event)=>{
        event.preventDefault();
        if (event?.target?.files && event?.target?.files?.length > 0) handleFile(event.target.files[0]);
    };
    // triggers the input when the button is clicked
    const onButtonClick = ()=>{
        inputRef?.current?.click();
    };
    const cleanState = ()=>{
        setFile(void 0);
        setRawString(void 0);
        formRef?.current?.reset();
    };
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.FormControl, {
        mt: 4,
        id: "form-file-upload",
        onDragEnter: handleDrag,
        onSubmit: (e)=>e.preventDefault(),
        borderRadius: 10,
        height: "10vw",
        ref: formRef,
        as: "form"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Flex, {
        justifyContent: "center",
        alignItems: "center",
        h: "100%",
        direction: "column"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
        ref: inputRef,
        type: "file",
        id: "input-file-upload",
        onChange: handleChange,
        multiple: false,
        display: "none"
    }), void 0 === file ? /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Flex, {
        alignItems: "center",
        direction: "column"
    }, fileUploadLogo || /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.img, {
        "data-testid": "upload-file-logo",
        src: __WEBPACK_EXTERNAL_MODULE__Avatars_Avatars_mjs__["default"].uploadFileSvg,
        mb: 5,
        alt: "upload-file-logo"
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
        textAlign: "center"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        variant: "link",
        onClick: onButtonClick
    }, fileUploadText || 'Click to upload'), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, " or drag and drop a file here"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Center, null, fileUploadDescription))) : /*#__PURE__*/ React.createElement(React.Fragment, null, fileUploadedLogo || /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Icon, {
        as: __WEBPACK_EXTERNAL_MODULE_react_icons_md__.MdCloudDone,
        color: "green.500",
        w: "20",
        h: "20"
    }), fileUploadedText || /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, file.name, " successfully uploaded"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        variant: "ghost",
        onClick: cleanState
    }, fileRemoveText || /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
        as: "u"
    }, "Remove file"))), dragActive && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_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
    })));
}
/* ESM default export */ const Dropzone_rslib_entry_ = Dropzone;
export { Dropzone_rslib_entry_ as default };
