"use client"

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

const Login = () => {

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

    const handleAction = (formData: FormData) => {
        const email= formData.get("email")!.toString();
        const password = formData.get("password")!.toString();
        console.log({
            "email": btoa(email),
            "password": btoa(password),
        });
        
         
    }

    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="Login"></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="email..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}>Test</FormTextInput>
                </div>
                <div className="mb-6">
                    <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}>Test</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={"Sign In"}></FormSubmitInput>
                </div>
                </Form>
            </div>

        </main>
    );
}

export default Login;