import React from 'react';
import { DropArea, DropDesc, DropIcon, DropTitle } from '../style';
type IProps = {
    disabled?: boolean;
    state: any;
    maxUpload: number;
    fileInput: any;
    dispatch: any;
    onFileInputChange: any;
};
const Component = function({ disabled, state, maxUpload, fileInput, dispatch, onFileInputChange }: IProps) {
    return (
        <DropArea
            disabled={disabled || state.files.length >= maxUpload}
            onClick={() => !disabled && (fileInput.current as HTMLInputElement).click()}
            onDrop={(e: any) => {
                const files = Array.from(e.dataTransfer.items).map((f: any) => f.getAsFile());
                dispatch({ isDragOver: false });
                onFileInputChange({ target: { files } } as any);
                e.preventDefault();
            }}
            onDragOver={(e: any) => {
                !state.isDragOver && dispatch({ isDragOver: true });
                e.preventDefault();
            }}
            onDragLeave={() => {
                state.isDragOver && dispatch({ isDragOver: false });
            }}
        >
            <DropIcon />
            <DropTitle>{state.isDragOver ? '释放鼠标' : '点击或将文件拖拽到这里上'}</DropTitle>
            <DropDesc>支持扩展名：.rar .zip .doc .docx .pdf .jpg..</DropDesc>
        </DropArea>
    );
};
export default Component;