import { useState } from "react";
import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
import UploadIcon from "../../assets/icons/UploadIcon";
import { SnackbarProvider, enqueueSnackbar } from 'notistack';

interface Props {
    text?: string;
    sx?: SxProps<Theme>;
    heightImg: string;
    widthImg?: string
}

//Научи функцию принимать данные для валидации
export default ({text, sx, heightImg, widthImg}: Props) => {
    const theme = useTheme();

    const imgHC = (imgInp:any) => {
        const [file] = imgInp.files
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
        } else {enqueueSnackbar('Размер картинки слишком велик')}
    }

    const [data, setData] = useState("")
    const [ready, setReady] = useState(false);

    const dragenterHC = () => {
        // console.log("onDragEnter")
        setReady(true)
    }

    const dragexitHC = () => {
        // console.log("onDragExit")
        setReady(false)
    }

    const dropHC = (event: any) => {
        event.preventDefault()
        // console.log("onDrop")
        setReady(false)

        const file = event.dataTransfer.files[0]
        console.log(event.dataTransfer.files[0])
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
        } else {enqueueSnackbar('Размер картинки слишком велик')}

    }

    const dragOverHC = (event: any) => {
        event.preventDefault()
        // console.log("onDragOver")
    }

    return (
        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
            <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
            <Box

                onDragEnter={dragenterHC}
                onDragExit={dragexitHC}
                onDrop={dropHC}
                onDragOver={dragOverHC}

                sx={{
                    width: "100%",
                    height: "120px",
                    position: "relative",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    backgroundColor: theme.palette.background.default,
                    border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
                    borderRadius: "8px",
                    opacity: data ? "0.5" : 1,
                    ...sx
                }}

            >
                <UploadIcon />
                <Typography sx={{
                    position: "absolute",
                    right: "10px",
                    bottom: "10px",
                    color: theme.palette.orange.main,
                    fontSize: "16px",
                    lineHeight: "19px",
                    textDecoration: "underline",
                }}>{text}</Typography>
                <SnackbarProvider style={{backgroundColor: theme.palette.brightPurple.main}}/>
                {data ?
                    <img height={heightImg} width={widthImg} src={data}
                            style={{
                                position: "absolute", zIndex: "-1",
                        objectFit: "revert-layer",
                    }}/>
                    :
                    null
                }
            </Box>
        </ButtonBase>
    )
}