import React, { useRef } from 'react';
import i18n from 'ui-i18n';
import Button from '@mui/material/Button';
import { useStyles } from './styles';
export var UploadMode = function (_a) {
    var _b = _a.supportedFileTypes, supportedFileTypes = _b === void 0 ? [] : _b, onUpload = _a.onUpload, onBeforeUpload = _a.onBeforeUpload;
    var styles = useStyles();
    var fileUploader = useRef();
    var supportedFileTypesString = supportedFileTypes.join(',');
    var onSelectFileClick = function () {
        fileUploader.current.value = null;
        fileUploader.current.click();
    };
    var onUploadListener = function (event) {
        var uploadedFiles = event.target.files || event.dataTransfer.files || [];
        if (uploadedFiles.length > 0) {
            onBeforeUpload();
            onUpload(uploadedFiles[0]);
        }
        event.stopPropagation();
        event.preventDefault();
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, { variant: "contained", onClick: onSelectFileClick, className: styles.button }, i18n.text('Select File')),
        React.createElement("input", { "data-reltio-id": "file-uploader", type: "file", className: styles.fileUploaderInput, onChange: onUploadListener, ref: fileUploader, name: "uploadfile", accept: supportedFileTypesString })));
};
