import PasswordInput from '@/Components/auth/PasswordInput';
import PasswordStrength from '@/Components/auth/PasswordStrength';
import { Button } from '@/Components/ui/button';
import { Field, Input } from '@/Components/ui/field';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

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

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.store'), { onFinish: () => reset('password', 'password_confirmation') });
    };

    return (
        <GuestLayout title="Choose a new password" subtitle="Pick something you haven't used elsewhere.">
            <Head title="Reset password" />
            <form onSubmit={submit} className="space-y-4" noValidate>
                <Field label="Email" htmlFor="email" error={errors.email}>
                    <Input id="email" type="email" autoComplete="username" value={data.email} onChange={(e) => setData('email', e.target.value)} />
                </Field>
                <Field label="New password" htmlFor="password" error={errors.password}>
                    <PasswordInput id="password" autoComplete="new-password" autoFocus value={data.password} aria-invalid={!!errors.password} onChange={(e) => setData('password', e.target.value)} />
                    <PasswordStrength value={data.password} />
                </Field>
                <Field label="Confirm password" htmlFor="password_confirmation" error={errors.password_confirmation}>
                    <PasswordInput id="password_confirmation" autoComplete="new-password" value={data.password_confirmation} onChange={(e) => setData('password_confirmation', e.target.value)} />
                </Field>
                <Button type="submit" size="lg" className="w-full" loading={processing}>Reset password</Button>
            </form>
        </GuestLayout>
    );
}
