import DangerButton from '@/components/DangerButton';
import InputError from '@/components/InputError';
import SecondaryButton from '@/components/SecondaryButton';
import TextInput from '@/components/TextInput';
import { useForm } from '@inertiajs/react';
import { useRef, useState } from 'react';
import {
    Dialog, DialogClose,
    DialogContent,
    DialogDescription, DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card.jsx";

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

    const {
        data,
        setData,
        delete: destroy,
        processing,
        reset,
        errors,
        clearErrors,
    } = useForm({
        password: '',
    });

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

        destroy(route('profile.destroy'), {
            preserveScroll: true,
            onError: () => passwordInput.current.focus(),
            onFinish: () => reset(),
        });
    };

    return (
        <Card>
            <CardHeader>
                <CardTitle>Delete Account</CardTitle>
                <CardDescription className="pt-3">Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account,please download any data or information that you wish to retain.</CardDescription>
            </CardHeader>
            <CardFooter>
                <Dialog>
                    <form onSubmit={ deleteUser }>
                        <DialogTrigger asChild>
                            <DangerButton>Delete Account</DangerButton>
                        </DialogTrigger>
                        <DialogContent className="max-w-[800px]">
                            <DialogHeader>
                                <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
                                    <DialogDescription className="pt-3">
                                        Once your account is deleted, all of its resources and
                                        data will be permanently deleted. Please enter your
                                        password to confirm you would like to permanently delete
                                        your account.
                                    </DialogDescription>
                            </DialogHeader>
                            <div className="items-center gap-4">
                                <TextInput id="password" type="password" name="password" ref={ passwordInput }
                                           value={ data.password }
                                           onChange={ (e) => setData('password', e.target.value) }
                                           className="mt-1 block w-full" isFocused placeholder="Password" />
                                <InputError essage={ errors.password } className="mt-2" />
                            </div>
                            <DialogFooter className="mt-6 flex justify-end">
                                <DialogClose asChild>
                                    <SecondaryButton>Cancel</SecondaryButton>
                                </DialogClose>
                                <DangerButton className="ms-3" onClick={ (e) => deleteUser(e) }>
                                    Delete Account
                                </DangerButton>
                            </DialogFooter>
                        </DialogContent>
                     </form>
                </Dialog>
            </CardFooter>
        </Card>
    );
}
