import React, {useState} from "react";
import axios from "axios";
import {HStack, Image, Spinner, Text, useToast} from "@chakra-ui/react";
import {Stack} from "@chakra-ui/layout";
import {uploadIcon} from "../../images";

export function PhotoUpload(props: any) {
    const { onUpload, label, height, color } = props;
    const toast = useToast()
    const [uploading, setUploading] = useState(false);
    const uploadUrl = 'https://image-uploading-servers.herokuapp.com/upload';

    const getFile = (e: any) => {
        uploadFile(e.target.files[0])
    };

    const uploadFile = (fileData: any) => {
        if (!fileData)
            return;
        const data = new FormData();
        data.append("file", fileData);
        setUploading(true);
        axios({
            method: "POST",
            url: uploadUrl,
            data: data,
        }).then((res) => {
                onUpload(res.data.url)
                resetFilerChooser();
                setUploading(false);
                toast({
                    title: 'Uploaded.',
                    description: "File uploaded",
                    status: 'success',
                    duration: 5000,
                    isClosable: true,
                })
            }
        ).catch(e => {
            resetFilerChooser();
            console.log("error ", e)
            setUploading(false);
            toast({
                title: 'Failed.',
                description: "Uploaded Failed Try Again",
                status: 'error',
                duration: 5000,
                isClosable: true,
            })
        })
    };
    const openFilerChooser = (e: any) => {
        // @ts-ignore
        document.getElementById("photofile").click();
    }
    const resetFilerChooser = () => {
        // @ts-ignore
        document.getElementById("photofile").value = "";
    }
    return (
        <>
            <Stack
                borderColor={""}
                w="100%" spacing={"7px"}>
                <Text
                    color={color}
                    fontFamily="MaisonBook"
                    fontSize="13px"
                    fontStyle="normal"
                    fontWeight={"700"}
                    lineHeight="16px"
                    letterSpacing="0.20000001192092896px"
                    textAlign="left"
                >
                    {label}
                </Text>
                <Stack
                    onClick={openFilerChooser}
                    cursor={"pointer"}
                    alignItems={"center"}
                    justifyContent={"center"}
                    bg="transparent"
                    h={height}
                    borderRadius="8px"
                    border="1px solid #DFE0EB"
                >
                    {uploading ?
                        <Spinner
                            color="#9FA2B4"
                            size='md' />
                        :
                        <HStack
                            spacing={"12px"}>
                            <Image src={uploadIcon} />
                            <Text
                                fontFamily="MaisonBold"
                                color="#B0B1B5"
                                fontSize="14px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="14px"
                                letterSpacing="0.50000001192092896px"
                            >
                                Upload Image
                            </Text>
                        </HStack>
                    }


                </Stack>
            </Stack>
            <input
                type="file" id="photofile"
                onChange={getFile}
                style={{ display: "none" }} />
        </>


    );
}