import { __ } from "@wordpress/i18n"; import { useRef, useState } from "@wordpress/element"; import { LeftArrow, RightArrow, RightArrowLong, TickIcon } from "./icons"; import { Toaster } from "react-hot-toast"; import WelcomePage from "../pages/welcome"; import BlocksSetup from "../pages/setup"; import FinishPage from "../pages/finish"; const SetupWizard = () => { const footer = document.querySelector("#wpfooter"); if (footer) { footer.style.display = "none"; } const nextBtnRef = useRef(null); const [stepNumber, setStepNumber] = useState(0); const [isExiting, setIsExiting] = useState(false); const [direction, setDirection] = useState("left"); const [animationClass, setAnimationClass] = useState(""); // steps. let setupSteps = ["Welcome", "Blocks", "Finish"]; const onAnimationEnd = () => { if (!isExiting) { return; } if (direction === "left") { setStepNumber((prev) => prev + 1); } else { setStepNumber((prev) => prev - 1); } setAnimationClass("is-entering"); setIsExiting(false); }; const nextStep = () => { setDirection("left"); setIsExiting(true); setAnimationClass("is-exiting"); }; const handleNext = () => { nextStep(); }; const handlePrev = () => { setDirection("right"); setIsExiting(true); setAnimationClass("is-exiting"); }; return (

{setupSteps?.map((step, index) => (

{index < stepNumber ? : "0" + (index + 1)} {step} {index !== setupSteps.length - 1 && }

))}

{setupSteps[stepNumber] === "Welcome" && } {setupSteps[stepNumber] === "Blocks" && } {setupSteps[stepNumber] === "Finish" && }

{stepNumber !== 0 && stepNumber !== setupSteps.length - 1 && ( )} {stepNumber === 0 && ( {"Skip it"} )} {stepNumber !== setupSteps.length - 1 && ( )}

); }; export default SetupWizard;