import { useEffect, useState, useRef } from "react";
import Webcam from "react-webcam";

import "./app.css";

function App() {
  const [success, setSuccess] = useState(false);
  const webcamRef = useRef<Webcam | null>(null);

  useEffect(() => {
    const listener = () => {
      console.log("click");

      setSuccess((success) => {
        if (success) return !success;

        const frame = webcamRef.current?.getScreenshot();

        console.log("send current frame to server");
        console.log("on success, change to success page");
        console.log("if state is 'verified', return to camera mode ");

        console.log(frame);

        return !success;
      });
    };

    window.addEventListener("click", listener);

    return () => window.removeEventListener("click", listener);
  }, []);

  console.log("State", success);

  return (
    <div className="app">
      <Webcam ref={webcamRef} className="webcam" />
      <div className="overlay"></div>
      <div className="header"></div>
      <div className="headtext">Scan the Record QR Code.</div>
      <div className="footer"></div>
      {success && (
        <div className="success">
          <div>Record Valid!</div>
        </div>
      )}
    </div>
  );
}

export default App;