import Webcam from "react-webcam";
import { useRef, useState } from "react";
import React from "react";
import uploadAzure from "../scripts/uploadAzure";

const CustomWebcam = () => {
    const webcamRef = useRef(null);
    const [imgSrc, setImgSrc] = useState(null);
    const isCapture = useState(false)
    const capture = React.useCallback(() => {
        if (webcamRef.current != null) {
            const imageSrc = webcamRef.current.getScreenshot();
            setImgSrc(imageSrc);
            isCapture[1](true)
        }
    }, [webcamRef]);

    return (
        <div className="webcam-container">
            {imgSrc ? (
                <img src={imgSrc} alt="webcam"/>
            ) : (
                <Webcam height={600} width={600} ref={webcamRef} />
            )}
            <div className="button-container">
                <button onClick={capture}>Capture photo</button>
            </div>
            {/* if isCapture is true, show button to upload to Azure */}
            {isCapture[0] ? (
                <div className="button-container">
                    <button onClick={uploadAzure}>Upload to Azure</button>
                </div>
            ) : (
                <></>
            )}
        </div>
    )
}

export default CustomWebcam