import {FC, useState} from "react";
import {useLocation, useNavigate} from "react-router-dom";

interface VerificationData {
    eMail: string;
    code: string;
}

const VerifyMail: FC = () => {
    const navigate = useNavigate()
    const location = useLocation();
    const [code, setCode] = useState('000000');

    if (location.state === null || location.state.email === undefined) {
        return (
            <div className="container">
                <p>Are you in the right place? It doesn't look like you have an email to verify!</p>
            </div>
        )
    }
    const email = location.state.email;

    function setFormData(data: DynamicFormData) {
        console.log("Setting form data")
        navigate('/thank-you', {
            state: {
                formData: data
            }
        });
    }

    type DynamicFormData = {
        [key: string]: string;
    };


    const handleCodeSubmit = async () => {
        const verificationData: VerificationData = {
            code: code,
            eMail: email
        }
        console.log(verificationData);
        fetch('http://localhost:8080/api/verify_email/form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(verificationData)
        })
            .then(response => {
                if (!response.ok) {
                    //TODO fix error and make message here?
                    response.json().then(result => console.log(result))
                    throw new Error('Invalid code');
                }
                //TODO check if its json if not its just text we need to handle and put in a p tag
                return response.json()
            })
            .then((data: DynamicFormData) => {
                setFormData(data);
            })
            .catch(error => {
                console.error('Received an unexpected error: ' + error);
            })
    }

    return (
        <div className="container">
            <p>Hi, you just completed a form and need to verify your email ({email}).</p>
            <p>Please check your email for a verification code and enter it below:</p>
            <input
                type="text"
                value={code}
                onChange={(e) => setCode(e.target.value)}
                className="verification-code-input"
            />
            <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>

        </div>
    )
}

export default VerifyMail