import FormInput from '@/Components/FormInput';
import PasswordInput from '@/Components/PasswordInput';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import GuestLayout from '@/Layouts/GuestLayout';
import { t } from '@/lib/utils';
import { Head, useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import { FormEventHandler } from 'react';

export default function Register({
    token,
    email,
}: {
    token: string;
    email: string;
}) {
    const { data, setData, post, processing, errors, reset } = useForm({
        token: token,
        email: email,
        password: '',
        password_confirmation: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('register.store'), {
            onFinish: () => reset('password', 'password_confirmation'),
        });
    };

    return (
        <GuestLayout>
            <Head title={t('Complete registration')} />

            <div className="mb-12 text-center">
                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight lg:text-5xl">
                    Ci sei quasi!
                </h1>
            </div>

            <div className="mb-8 text-sm text-gray-600">
                Imposta una password efficace per proteggere i tuoi dati.
            </div>

            <form onSubmit={submit}>
                <div>
                    <FormInput label="email" id="email" error={errors.email}>
                        <TextInput
                            value={data.email}
                            isFocused={true}
                            disabled
                            onChange={(e) => setData('email', e.target.value)}
                        />
                    </FormInput>
                </div>
                <div className="mt-4">
                    <FormInput
                        id="password"
                        label="Password"
                        error={errors.password}
                    >
                        <PasswordInput
                            value={data.password}
                            onChange={(e) =>
                                setData('password', e.target.value)
                            }
                        />
                    </FormInput>
                </div>
                <div className="mt-4">
                    <FormInput
                        id="password_confirmation"
                        label={t('Confirm password')}
                        error={errors.password_confirmation}
                    >
                        <PasswordInput
                            value={data.password_confirmation}
                            onChange={(e) =>
                                setData('password_confirmation', e.target.value)
                            }
                        />
                    </FormInput>
                </div>

                <div className="mt-20 flex items-center justify-end">
                    <PrimaryButton className="ms-4 px-10" disabled={processing}>
                        {processing ? (
                            <Loader2 className="animate-spin" />
                        ) : null}
                        {t('Save')}
                    </PrimaryButton>
                </div>
            </form>
        </GuestLayout>
    );
}
