import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styled from 'styled-components';
import { spacing, Stack, Wrap } from '../../spacing';
import { Button } from '../buttonv2/Buttonv2.component';
import { Icon } from '../icon/Icon.component';
import { Text } from '../text/Text.component';
const DropzoneContainer = styled.div `
  padding: ${spacing.r24};
  border: ${spacing.f2} dashed
    ${(props) => !props.isDragActive
    ? props.theme.textSecondary
    : props.theme.selectedActive};
  box-sizing: border-box;
  display: flex;
  ${(props) => (props.variant === 'large' ? `text-align: center;` : ``)}
`;
const FileList = styled.div `
  max-height: 100px;
  overflow-y: auto;
  flex: 1;
  width: 100%;
`;
const FileListItem = styled(Wrap) `
  align-items: baseline;
  &:hover {
    background: ${(props) => props.theme.selectedActive};
  }
`;
const defaultDropzoneLabels = {
    doesnt_meet_our_requirements: "doesn't meet our requirements",
    or: 'OR',
    label: 'Drag and drop files and folders here',
    buttonLabel: 'Add files',
    buttonAddMoreLabel: 'Add more files',
};
export function Dropzone({ labels, onChange, variant, ...dropzoneOptions }) {
    labels = { ...defaultDropzoneLabels, ...labels };
    const [acceptedFiles, setAcceptedFiles] = useState([]);
    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
        ...dropzoneOptions,
        onDrop: (acceptedFiles, rejectedFiles, e) => {
            const { multiple } = dropzoneOptions;
            setAcceptedFiles((alreadyAcceptedFiles) => {
                const singleFileAlreadyHasFile = !multiple && alreadyAcceptedFiles.length === 1;
                const newAcceptedFiles = singleFileAlreadyHasFile
                    ? alreadyAcceptedFiles
                    : [...alreadyAcceptedFiles, ...acceptedFiles];
                if (onChange) {
                    onChange(newAcceptedFiles);
                }
                return newAcceptedFiles;
            });
            if (dropzoneOptions.onDrop) {
                dropzoneOptions.onDrop(acceptedFiles, rejectedFiles, e);
            }
        },
    });
    const { multiple } = dropzoneOptions;
    const { onClick, ...rootProps } = getRootProps();
    const removeFile = (fileIndex) => {
        setAcceptedFiles((alreadyAcceptedFiles) => {
            const newAcceptedFiles = [...alreadyAcceptedFiles];
            newAcceptedFiles.splice(fileIndex, 1);
            if (onChange) {
                onChange(newAcceptedFiles);
            }
            return newAcceptedFiles;
        });
    };
    return (_jsxs(Stack, { direction: "vertical", children: [_jsxs(DropzoneContainer, { ...rootProps, isDragActive: isDragActive, variant: variant, children: [_jsx("input", { ...getInputProps() }), _jsx("div", { style: { flex: '1' }, children: !multiple && acceptedFiles.length === 1 ? (_jsxs(FileListItem, { children: [_jsx(Text, { children: acceptedFiles[0].name }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: { overlay: 'Remove' }, "aria-label": `Remove ${acceptedFiles[0].name}`, type: "button", onClick: () => {
                                        removeFile(0);
                                    } })] })) : multiple && acceptedFiles.length > 0 ? (_jsxs(Stack, { direction: "vertical", children: [_jsx(Button, { icon: variant === 'large' ? _jsx(Icon, { name: "Create-add" }) : undefined, variant: "secondary", type: "button", label: labels.buttonAddMoreLabel, onClick: onClick }), _jsx(FileList, { children: acceptedFiles.map((file, index) => (_jsxs(FileListItem, { children: [_jsx(Text, { children: file.name }), _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: { overlay: 'Remove' }, "aria-label": `Remove ${file.name}`, type: "button", onClick: () => {
                                                    removeFile(index);
                                                } })] }, index))) })] })) : (_jsxs(Stack, { direction: variant === 'large' ? 'vertical' : 'horizontal', gap: 'f16', children: [_jsx(Text, { children: _jsx(Icon, { name: "Upload", size: "3x" }) }), _jsx(Text, { children: labels.label }), variant === 'large' && _jsx(Text, { children: labels.or }), _jsx(Button, { icon: variant === 'large' ? _jsx(Icon, { name: "Create-add" }) : undefined, label: labels.buttonLabel, variant: "secondary", type: "button", onClick: onClick })] })) })] }), _jsx(Text, { variant: "Smaller", isEmphazed: true, color: "statusCritical", children: fileRejections.length > 0 ? (fileRejections.map((rejection) => rejection.file.name) +
                    ' ' +
                    labels.doesnt_meet_our_requirements) : (_jsx(_Fragment, { children: "\u00A0" })) })] }));
}
