import React from 'react';
import { Text, Group, useMantineTheme } from '@mantine/core'
import { BsCardImage, BsCloudUpload, BsXLg } from 'react-icons/bs'
import { Dropzone } from '@mantine/dropzone';
import { showNotification } from '@mantine/notifications';



function CustomDropZone(props) {
    const {uploadText1, uploadText2, uploadFormat, maxSize, multipleFiles, returnFiles} = props

    const theme = useMantineTheme();


    const handleFileRejections = (fileRejections) => {
        let message = ""
        let fileName = ""
        if ((fileRejections.length > 1) && (!multipleFiles)) {
            showNotification({color: 'red', title: "Too many Files!", message: "Only a single photo is allowed for the coverphoto!"})
            return
        }
        fileName = fileRejections[0].file.name
        const errors = fileRejections[0].errors
        errors.forEach(error => {
            message = message + `${error.message} \n\n`
        })
        showNotification({color: 'red', title: `Error accepting file: ${fileName}`, message: message})
    }



    return (
        <Dropzone
            onDrop={(files) => returnFiles(files)}
            onReject={(fileRejections) => handleFileRejections(fileRejections)}
            maxSize={maxSize}
            multiple={multipleFiles}
            accept={uploadFormat}    
        >
            <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
            <Dropzone.Accept>
                <BsCloudUpload
                    size={50}
                    stroke={1.5}
                    color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
                />
            </Dropzone.Accept>
            <Dropzone.Reject>
                <BsXLg
                    size={50}
                    stroke={1.5}
                    color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
                />
            </Dropzone.Reject>
            <Dropzone.Idle>
                <BsCardImage size={50} stroke={1.5} />
            </Dropzone.Idle>
                <div>
                    <Text size="xl" inline>
                        {uploadText1}
                    </Text>
                    <Text size="sm" color="dimmed" inline mt={7}>
                        {uploadText2}
                    </Text>
                </div>
            </Group>
        </Dropzone>

    );
}

export default CustomDropZone;