import React, { useCallback, useState } from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import Typography from '@mui/material/Typography';
import { SelectImageButton } from '../SelectImageButton';
import UploadIcon from '../../../icons/UploadIcon';
import { MAX_IMAGE_SIZE } from '../../constants';
import { useStyles } from './styles';
var ACCEPTABLE_FILE_TYPE = 'Files';
export var TargetBox = function (_a) {
    var _b;
    var onAppendFile = _a.onAppendFile, className = _a.className;
    var styles = useStyles();
    var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
    var handleDragOver = useCallback(function (e) {
        e.preventDefault();
        e.stopPropagation();
        var filesType = e.dataTransfer.types[0];
        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
        setIsActive(isValidType);
    }, []);
    var handleDragLeave = useCallback(function (e) {
        e.preventDefault();
        e.stopPropagation();
        var relatedTarget = e.relatedTarget;
        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
        if (isLeave || !relatedTarget) {
            setIsActive(false);
        }
    }, []);
    var handleDrop = useCallback(function (e) {
        e.preventDefault();
        e.stopPropagation();
        setIsActive(false);
        var filesType = e.dataTransfer.types[0];
        if (filesType === ACCEPTABLE_FILE_TYPE) {
            var file = e.dataTransfer.files[0];
            onAppendFile(file);
        }
    }, [onAppendFile]);
    return (React.createElement("div", { className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
        React.createElement(UploadIcon, { className: styles.icon }),
        React.createElement(Typography, { className: styles.title }, i18n.text('Drag an image here')),
        React.createElement(Typography, { className: styles.description }, i18n.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {
            MAX_IMAGE_SIZE: MAX_IMAGE_SIZE
        })),
        React.createElement(SelectImageButton, { onAppendFile: onAppendFile })));
};
