import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import { Transition } from '@headlessui/react';
import { useForm } from '@inertiajs/react';
import { useRef } from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/Components/ui/card.jsx";

export default function UpdatePasswordForm({ className = '' }) {
    const passwordInput = useRef();
    const currentPasswordInput = useRef();

    const {
        data,
        setData,
        errors,
        put,
        reset,
        processing,
        recentlySuccessful,
    } = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

    const updatePassword = (e) => {
        e.preventDefault();

        put(route('password.update'), {
            preserveScroll: true,
            onSuccess: () => reset(),
            onError: (errors) => {
                if (errors.password) {
                    reset('password', 'password_confirmation');
                    passwordInput.current.focus();
                }

                if (errors.current_password) {
                    reset('current_password');
                    currentPasswordInput.current.focus();
                }
            },
        });
    };

    return (
        <Card>
            <form onSubmit={ updatePassword }>
                <CardHeader>
                    <CardTitle>Update Password</CardTitle>
                    <CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="grid w-full items-center gap-4">
                        <div className="flex flex-col space-y-1.5">
                            <InputLabel htmlFor="current_password" value="Current Password" />
                            <TextInput
                                id="current_password"
                                ref={ currentPasswordInput }
                                value={ data.current_password }
                                onChange={ (e) =>
                                    setData('current_password', e.target.value)
                                }
                                type="password"
                                className="mt-1 block w-full" />
                        </div>
                        <InputError className="mt-2" message={ errors.current_password } />
                    </div>
                    <div className="grid w-full items-center gap-4 pt-3">
                        <div className="flex flex-col space-y-1.5">
                            <InputLabel htmlFor="password" value="New Password" />
                            <TextInput
                                id="password"
                                ref={ passwordInput }
                                value={ data.password }
                                onChange={ (e) => setData('password', e.target.value) }
                                type="password"
                                className="mt-1 block w-full" />
                        </div>
                        <InputError className="mt-2" message={ errors.password } />
                    </div>
                    <div className="grid w-full items-center gap-4 pt-3">
                        <div className="flex flex-col space-y-1.5">
                            <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
                            <TextInput
                                id="password_confirmation"
                                value={ data.password_confirmation }
                                onChange={ (e) =>
                                    setData('password_confirmation', e.target.value)
                                }
                                type="password"
                                className="mt-1 block w-full" />
                        </div>
                        <InputError className="mt-2" message={ errors.password_confirmation } />
                    </div>
                </CardContent>
                <CardFooter>
                    <PrimaryButton disabled={ processing }>Save</PrimaryButton>
                    <Transition
                        show={ recentlySuccessful }
                        enter="transition ease-in-out"
                        enterFrom="opacity-0"
                        leave="transition ease-in-out"
                        leaveTo="opacity-0">
                            <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
                    </Transition>
                </CardFooter>
            </form>
        </Card>
    );
}