import { useForm } from '@inertiajs/react';
import { FormEventHandler, useState } from 'react';

import { Button } from '@admin/components/ui/button';
import { FormError } from '@admin/components/ui/form-error';
import { Input } from '@admin/components/ui/input';
import { Label } from '@admin/components/ui/label';

export function DeleteUser() {
    const [open, setOpen] = useState(false);
    const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm({
        password: '',
    });

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

        destroy(route('profile.destroy'), {
            preserveScroll: true,
            onSuccess: () => {
                setOpen(false);
                reset();
            },
            onFinish: () => reset(),
        });
    };

    return (
        <div className="space-y-4 border-t border-gray-200 pt-6 dark:border-white/10">
            <div>
                <h4 className="text-base font-semibold text-danger">Delete account</h4>
                <p className="text-sm text-gray-500 dark:text-white/70">
                    Delete your account and all of its resources. This cannot be undone.
                </p>
            </div>

            {!open ? (
                <Button type="button" className="bg-danger hover:bg-danger border-danger" onClick={() => setOpen(true)}>
                    Delete account
                </Button>
            ) : (
                <form onSubmit={deleteUser} className="space-y-4 rounded-sm border border-danger/20 bg-danger/5 p-4">
                    <div>
                        <Label htmlFor="delete-password">Confirm with your password</Label>
                        <Input
                            id="delete-password"
                            type="password"
                            value={data.password}
                            onChange={(e) => setData('password', e.target.value)}
                            autoComplete="current-password"
                        />
                        <FormError message={errors.password} />
                    </div>
                    <div className="flex gap-2">
                        <Button type="submit" disabled={processing} className="bg-danger hover:bg-danger border-danger">
                            Confirm delete
                        </Button>
                        <Button
                            type="button"
                            variant="secondary"
                            onClick={() => {
                                setOpen(false);
                                clearErrors();
                                reset();
                            }}
                        >
                            Cancel
                        </Button>
                    </div>
                </form>
            )}
        </div>
    );
}