frontPanel/src/pages/startPage/dropfavicon.tsx

import { useEffect, useRef, useState } from "react";
import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
import UploadIcon from "../../assets/icons/UploadIcon";
import { SnackbarProvider, enqueueSnackbar } from 'notistack';
import Resizer from "react-image-file-resizer";
import JSZip from "jszip"
import saveAs from "file-saver"

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

const imageFavicon = [
    {
        maxWidth: 16,
        maxHeight: 16,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 32,
        maxHeight: 32,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 48,
        maxHeight: 48,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 76,
        maxHeight: 76,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 96,
        maxHeight: 96,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 120,
        maxHeight: 120,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 128,
        maxHeight: 128,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 144,
        maxHeight: 144,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 152,
        maxHeight: 152,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 167,
        maxHeight: 167,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 180,
        maxHeight: 180,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 192,
        maxHeight: 192,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 196,
        maxHeight: 196,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 228,
        maxHeight: 288,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 256,
        maxHeight: 256,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 300,
        maxHeight: 300,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 384,
        maxHeight: 384,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 512,
        maxHeight: 512,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    }
]
export default ({text, sx, heightImg, widthImg}: Props) => {
    const theme = useTheme();
    const [favList, setFavList] = useState<string[]>([])

    useEffect(() => {
        if (favList.length === 17) {

            console.log("сейчас я сработаю")


        // const zip = new JSZip();//создание зип архива
        
        // const idx = uri.indexOf('base64,') + 'base64,'.length; //обработка строки картинки
        // const content = uri.substring(idx); //обработка строки картинки
        // zip.file("fav.jpg", content, {base64: true}); //сохранение картинки в архив с именем "fav.jpg"
        
        // zip.generateAsync({type:"blob"}).then(function(content) { // скачивание архива
        //     saveAs(content, "fav.zip"); // скачивание архива
        // }); // скачивание архива

        }
    }, [favList])


    const callback = (uri:any) => {
        setFavList( old => [...old, uri])
    };
    
    
    const imgHC = (imgInp:any) => {
        setFavList([])
        const [file] = imgInp.files
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
        } else {enqueueSnackbar('Размер картинки слишком велик')}
        imageFavicon.forEach(obj => {
            try {
                Resizer.imageFileResizer(
                    [file][0],
                    obj.maxWidth,
                    obj.maxHeight,
                    obj.compressFormat,
                    obj.quality,
                    obj.rotation,
                    callback,
                );
            } catch (err) {
                console.log(err);
            }
        })
    }




    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('Размер картинки слишком велик')}
        // try {
        //     Resizer.imageFileResizer(
        //         file,
        //         50,
        //         50,
        //         "JPEG",
        //         100,
        //         0,
        //         callback,
        //     );
        //
        // } catch (err) {
        //     console.log(err);
        // }
        //
    }

    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>
    )
}