import { useState } from "react";
import { Box, ButtonBase, useTheme,Typography } from "@mui/material";
import UploadIcon from "../../assets/icons/UploadIcon";

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

    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])
        setData(URL.createObjectURL(file))
    }

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

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

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

                sx={{
                    width: "120px",
                    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
                }}

            >
                <UploadIcon />
                <Typography sx={{
                    position: "absolute",
                    right: "10px",
                    bottom: "10px",
                    color: theme.palette.orange.main,
                    fontSize: "16px",
                    lineHeight: "19px",
                    textDecoration: "underline",
                }}>5 MB максимум</Typography>
                {data ?
                    <img height="110" src={data}
                            style={{
                                position: "absolute", zIndex: "-1",
                        objectFit: "revert-layer",
                    }}/>
                    :
                    null
                }
            </Box>
        </ButtonBase>
    )
}