ERitors-Scribe-Desktop/app/login/register/StepTree.tsx

import React, {useContext, useState} from "react";
import {Link} from "@/lib/navigation";
import {AlertContext} from "@/context/AlertContext";
import {KeyRound} from 'lucide-react';
import {useTranslations} from "@/lib/i18n";
import {LangContext, LangContextProps} from "@/context/LangContext";
import {apiPostPublic} from "@/lib/api/client";
import Button from "@/components/ui/Button";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";

export default function StepTree(
    {
        email,
        prevStep
    }: {
        email: string;
        prevStep: Function;
    }) {

    const {errorMessage, successMessage} = useContext(AlertContext);

    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
    const [verifyCode, setVerifyCode] = useState<string>('');
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext)

    async function handleVerifyCode(): Promise<void> {
        if (verifyCode === '') {
            errorMessage(t('registerStepTwo.error.codeIncorrect'));
            return;
        }
        try {
            const response: boolean = await apiPostPublic<boolean>('register/verify-code', {
                verifyCode,
                email,
            }, lang);
            if (!response) {
                errorMessage(t('registerStepTwo.error.codeIncorrect'));
                return;
            }
            setIsConfirmed(true);
            successMessage(t('registerStepTwo.success.verified'));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('registerStepTwo.error.unknown'));
            }
        }
    }

    return (
        !isConfirmed ? (
            <div className="space-y-6">
                <div className="text-center mb-6">
                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
                </div>

                <InputField icon={KeyRound} fieldName={t('registerStepTwo.fields.code.label')} input={
                    <TextInput value={verifyCode} setValue={(e) => setVerifyCode(e.target.value)}
                               placeholder={t('registerStepTwo.fields.code.placeholder')}/>
                }/>

                <div className="flex flex-col space-y-3 mt-6">
                    <Button variant="primary" fullWidth size="lg" onClick={() => handleVerifyCode()}>
                        {t('registerStepTwo.verify')}
                    </Button>

                    <Button variant="secondary" fullWidth size="lg" onClick={() => prevStep()}>
                        {t('registerStepTwo.back')}
                    </Button>
                </div>
            </div>
        ) : (
            <div className="space-y-6">
                <div className="p-4 bg-success/20 border border-success rounded-xl">
                    <p className="text-center text-text-primary">{t('registerStepTwo.confirmed')}</p>
                </div>
                <div className="mt-6">
                    <Link href="/login" className="block w-full">
                        <Button variant="primary" fullWidth size="lg">
                            {t('registerStepTwo.start')}
                        </Button>
                    </Link>
                </div>
            </div>
        )
    )
}