import Form from "../../components/ui/form";
import { FormLabel, FormSubmitInput, FormTextInput } from "../../components/ui/form-input";
import PageTitle from "../../components/ui/page-title";
import { type ChangeEvent, useState } from "react";

const Register = () => {

    const [inputData, setInputData] = useState({
        "email": "",
        "username": "",
        "password": "",
        "confirmPassword": ""
    });

    const [error, setError] = useState("");

    const handleAction = async (formData: FormData) => {
        const email= formData.get("email")!.toString();
        const password = formData.get("password")!.toString();
        const username = formData.get("username")!.toString();

        const res = await fetch("http://127.0.0.1/", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "email": btoa(email),
                "username": btoa(username),
                "password": btoa(password),
            })
        });
        if(!res.ok)
        {
            setError(`${res.statusText}`);
        }
        return await res.json();

        
         
    }

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        e.preventDefault();
        setInputData({
            ...inputData,
            [e.target.name]: e.target.value
        });
    }

    return (
        <main className="flex min-h-screen flex-col items-center justify-stretch p-24">
            <PageTitle title="Register"></PageTitle>
            <div className="w-full max-w-xs">
                <Form className="shadow-md rounded px-8 pt-6 pb-8 mb-4" formAction={handleAction}>
                    <div className="mb-4">
                        <FormLabel className="block text-eth text-sm font-bold mb-2" name={"email"}></FormLabel>
                        <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="E-Mail..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}></FormTextInput>
                    </div>
                    <div className="mb-4">
                        <FormLabel className="block text-eth text-sm font-bold mb-2" name={"username"}></FormLabel>
                        <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Username..." type="text" name="username" value={inputData.username} onChangeHandler={handleChange}></FormTextInput>
                    </div>
                    <div className="mb-4">
                        <FormLabel className="block text-eth text-sm font-bold mb-2" name={"password"}></FormLabel>
                        <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}></FormTextInput>
                        
                    </div>
                    <div className="mb-6">
                        <FormLabel className="block text-eth text-sm font-bold mb-2" name={"confirmPassword"} title={"Confirm Password"}></FormLabel>
                        <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Confirm Password..." type="password" name="confirmPassword" value={inputData.confirmPassword} onChangeHandler={handleChange}></FormTextInput>
                        <p className="text-red-500 text-xs italic">Please choose a password.</p>
                    </div>
                    <div className="flex items-center justify-between">
                        <FormSubmitInput className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" name="submit" onSubmitHandler={undefined} value={"Register"}></FormSubmitInput>
                    </div>
                </Form>
            </div>

        </main>
    );
}

export default Register;