'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { useTranslation } from '../../../providers/Translation/index.js';
import { Button } from '../../Button/index.js';
import { Dropzone } from '../../Dropzone/index.js';
import { DrawerHeader } from '../Header/index.js';
import './index.scss';
const baseClass = 'bulk-upload--add-files';
export function AddFilesView({ acceptMimeTypes, onCancel, onDrop }) {
    const { t } = useTranslation();
    const inputRef = React.useRef(null);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV(DrawerHeader, {
                onClose: onCancel,
                title: t('upload:addFiles')
            }, void 0, false, {
                fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                lineNumber: 25,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__dropArea`,
                children: /*#__PURE__*/ _jsxDEV(Dropzone, {
                    multipleFiles: true,
                    onChange: onDrop,
                    children: [
                        /*#__PURE__*/ _jsxDEV(Button, {
                            buttonStyle: "subtle",
                            iconPosition: "left",
                            onClick: ()=>{
                                if (inputRef.current) {
                                    inputRef.current.click();
                                }
                            },
                            size: "small",
                            children: t('upload:selectFile')
                        }, void 0, false, {
                            fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                            lineNumber: 28,
                            columnNumber: 11
                        }, this),
                        /*#__PURE__*/ _jsxDEV("input", {
                            accept: acceptMimeTypes,
                            "aria-hidden": "true",
                            className: `${baseClass}__hidden-input`,
                            hidden: true,
                            multiple: true,
                            onChange: (e)=>{
                                if (e.target.files && e.target.files.length > 0) {
                                    onDrop(e.target.files);
                                }
                            },
                            ref: inputRef,
                            type: "file"
                        }, void 0, false, {
                            fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                            lineNumber: 40,
                            columnNumber: 11
                        }, this),
                        /*#__PURE__*/ _jsxDEV("p", {
                            className: `${baseClass}__dragAndDropText`,
                            children: [
                                t('general:or'),
                                " ",
                                t('upload:dragAndDrop')
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                            lineNumber: 55,
                            columnNumber: 11
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                    lineNumber: 27,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
                lineNumber: 26,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/BulkUpload/AddFilesView/index.tsx",
        lineNumber: 24,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map