front/src/VerificationScene.tsx

import { useState } from "react";
import BoxContainer from "./components/BoxContainer";
import VideoWrapper from "@/components/VideoWrapper.tsx";
import ResultContainer from "@/components/ResultContainer.tsx";
import DarkVideoWrapper from "@/components/DarkVideoWrapper.tsx";

enum StepType {
  takeId,
  verifyId,
  takeFrontPic,
  verifyProfile,
  result,
}

const stepsArray: StepType[] = [
  StepType.takeId,
  StepType.verifyId,
  StepType.takeFrontPic,
  StepType.verifyProfile,
  StepType.result,
];

export default function VerificationScene() {
  const [currentStep, setCurrentStep] = useState<StepType>(StepType.takeId);
  const [idCardPicture, setIdCardPicture] = useState<string>();
  const [profilePicture, setProfilePicture] = useState<string>();

  const handleNextStep = () => {
    if (currentStep == StepType.result) return;
    setCurrentStep((currentStep + 1) % stepsArray.length);
  };
  const handlePrevStep = () => {
    if (currentStep == StepType.takeId) return;
    setCurrentStep((currentStep - 1) % stepsArray.length);
  };

  const sendImageToServer = async (
    imageDataUrl: string,
    setLoading: (n: boolean) => void,
  ) => {
    try {
      const response = await fetch("YOUR_BACKEND_URL/api/upload", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ image: imageDataUrl }),
      });

      if (!response.ok) {
        throw new Error("Erreur lors de l'envoi de l'image");
      }

      const data = await response.json();
      console.log("Image envoyée avec succès:", data);
      setLoading(true);
    } catch (error) {
      console.error("Erreur:", error);
      setLoading(false);
    }
  };

  let stepContent = undefined;

  if (currentStep == StepType.takeId) {
    stepContent = (
      <>
        <h1 className="text-black text-2xl mt-20 text-center px-28">
          Take a picture of the Capture the front side of your ID Card
        </h1>
        <VideoWrapper
          handleNextStep={handleNextStep}
          setImage={setIdCardPicture}
          className="shadow-lg mt-20"
          height="250px"
          width="400px"
        />
      </>
    );
  }
  if (currentStep == StepType.verifyId) {
    stepContent = (
      <>
        <div className="overflow-hidden w-2/3 h-2/4 mt-10">
          <img src={idCardPicture} alt="captured" />
        </div>
        <h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
        <div className="mt-32 space-x-20">
          <button
            onClick={handlePrevStep}
            className="bg-red-600 transition text-white rounded-2xl text-xl hover:bg-red-800 w-40 h-16"
          >
            No
          </button>
          <button
            onClick={handleNextStep}
            className="bg-blue-600 transition text-white rounded-2xl text-xl hover:bg-gray-800 w-40 h-16"
          >
            Yes
          </button>
        </div>
      </>
    );
  }

  if (currentStep == StepType.takeFrontPic) {
    stepContent = (
      <>
        <h1 className="mt-5 font-bold text-lg">Center your face</h1>
        <DarkVideoWrapper
          setImage={setProfilePicture}
          className="mt-20  w-2/4 h-3/5 overflow-hidden"
          handleNextStep={handleNextStep}
        />
      </>
    );
  }
  if (currentStep == StepType.verifyProfile) {
    stepContent = (
      <>
        <div className="overflow-hidden w-2/3 h-2/4 mt-10">
          <img src={profilePicture} alt="captured" />
        </div>
        <h1 className="text-2xl font-bold">Is This Picture Correct ?</h1>
        <div className="mt-32 space-x-20">
          <button
            onClick={handlePrevStep}
            className="bg-red-600 transition text-white rounded-2xl text-xl hover:bg-red-800 w-40 h-16"
          >
            No
          </button>
          <button
            onClick={handleNextStep}
            className="bg-blue-600 transition text-white rounded-2xl text-xl hover:bg-gray-800 w-40 h-16"
          >
            Yes (Submit)
          </button>
        </div>
      </>
    );
  }

  if (currentStep == StepType.result) {
    stepContent = (
      <ResultContainer
        sendImageToServer={sendImageToServer}
        idCardPicture={idCardPicture ?? ""}
      />
    );
  }

  return (
    <>
      <div className="bg-gray-100">
        <BoxContainer headerName="Identity Verification Required">
          <div className="h-full w-full flex flex-col items-center overflow-hidden">
            {stepContent}
          </div>
        </BoxContainer>
      </div>
    </>
  );
}