var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useMemo } from 'react';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import { FluentButton } from '../UI/inputs/buttons/FluentButton';
import { FluentIcon } from '../utilities/iconLibrary/FluentIcon';
import { formatBytes } from '../utilities/uploader/formatBytes';
import { PageIcon } from '@fluentui/react-icons';
import { Typography, lighten, makeStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    btnWrapper: {
        display: 'flex',
        justifyContent: 'center',
        gap: theme.spacing(2),
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    },
    dndWrapper: {
        backgroundColor: lighten(theme.palette.secondary.light, 0.8),
        height: '100%',
        minHeight: (props) => props === null || props === void 0 ? void 0 : props.minHeight,
        maxHeight: (props) => props === null || props === void 0 ? void 0 : props.maxHeight,
        display: 'flex',
        alignItems: 'center',
        textAlign: 'center',
        border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,
        overflow: 'hidden'
    },
    fileNameWrapper: {
        display: 'flex',
        gap: theme.spacing(1),
        alignItems: 'center',
        textAlign: 'center',
        justifyContent: 'center'
    },
    dndContent: {
        flexGrow: 1,
        textAlign: 'center'
    },
    textWrapper: {
        overflow: 'hidden',
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2)
    }
}));
export const DragDropFileUpload = (props) => {
    const { title, handleUploadFile, hideSelectFileButton = false, hideFilePreview = false, minHeight, maxHeight, multiple = false, maxFileSize } = props, otherDropZoneProps = __rest(props, ["title", "handleUploadFile", "hideSelectFileButton", "hideFilePreview", "minHeight", "maxHeight", "multiple", "maxFileSize"]);
    const { t } = useTranslation();
    const classes = useStyles({ minHeight, maxHeight });
    const { open, acceptedFiles, getRootProps, getInputProps, fileRejections } = useDropzone(Object.assign({ noClick: true, noKeyboard: true, multiple: multiple, onDrop: handleUploadFile, maxSize: maxFileSize }, otherDropZoneProps));
    const files = useMemo(() => {
        return acceptedFiles.map((file) => (React.createElement("div", { className: classes.fileNameWrapper }, React.createElement(FluentIcon, { size: "small", component: PageIcon }), React.createElement(Typography, null, ` ${file === null || file === void 0 ? void 0 : file.path} (${formatBytes(file === null || file === void 0 ? void 0 : file.size)})`))));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [acceptedFiles]);
    const rejectedFilesExceedingMaxFileSize = useMemo(() => {
        return fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.filter(({ errors }) => errors.some((error) => error.code === 'file-too-large')).map(({ file }) => (React.createElement("div", { className: classes.fileNameWrapper, key: file.path || file.name }, React.createElement(FluentIcon, { size: "small", component: PageIcon }), React.createElement(Typography, { color: "error" }, `${(file === null || file === void 0 ? void 0 : file.path) || (file === null || file === void 0 ? void 0 : file.name)} (${formatBytes(file === null || file === void 0 ? void 0 : file.size)}): File size exceeds ${maxFileSize} Bytes`))));
    }, [fileRejections]);
    return (React.createElement("div", null, React.createElement("div", Object.assign({}, getRootProps({ className: 'dropzone' }), { className: classes.dndWrapper }), React.createElement("div", { className: classes.dndContent }, React.createElement("input", Object.assign({}, getInputProps())), React.createElement(Typography, { className: classes.textWrapper }, title
        ? title
        : multiple
            ? t('Drag and drop files here or select files')
            : t('Drag and drop a file here or select a file')), !hideSelectFileButton && (React.createElement("div", { className: classes.btnWrapper }, React.createElement(FluentButton, { onClick: open, color: "secondary", variant: "contained" }, React.createElement(Typography, { noWrap: true }, multiple ? t('Select Files') : t('Select a File'))))), !hideFilePreview && React.createElement("div", null, files), maxFileSize && rejectedFilesExceedingMaxFileSize.length > 0 && (React.createElement("div", null, rejectedFilesExceedingMaxFileSize))))));
};
DragDropFileUpload.propTypes = {
    /**
     * Optional, title
     */
    title: PropTypes.string,
    /**
     * Optional, event handler that accept a param (an array of files) when drop or select files.
     * can use other props to handle this event such as onDropAccepted, onDropRejected.
     * https://react-dropzone.js.org/#section-components
     */
    handleUploadFile: PropTypes.func,
    /**
     * Optional, hide or show the select file button (default is false)
     */
    hideSelectFileButton: PropTypes.bool,
    /**
     * Optional, hide or show the file sneak preview (default is false)
     */
    hideFilePreview: PropTypes.bool,
    /**
     * Optional, minimum height
     */
    minHeight: PropTypes.string | PropTypes.number,
    /**
     * Optional, maximum height
     */
    maxHeight: PropTypes.string | PropTypes.number,
    /**
     * Optional, allow to add multiple files at a time (default is false)
     */
    multiple: PropTypes.bool
};
//# sourceMappingURL=DragDropFileUpload.js.map