import { Button } from '@heroui/react';
import { Field } from '@/Components/ui/Field';
import { FormModal, FullWidth } from '@/Components/ui/FormModal';
import { TrashIcon } from '@heroicons/react/24/solid';
import { useForm } from '@inertiajs/react';
import { useState } from 'react';

export default function DeleteUserForm({
    className = '',
}: {
    className?: string;
}) {
    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);

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

    const deleteUser = () => {
        destroy(route('profile.destroy'), {
            preserveScroll: true,
            onSuccess: () => closeModal(),
            onFinish: () => reset(),
        });
    };

    const closeModal = () => {
        setConfirmingUserDeletion(false);
        clearErrors();
        reset();
    };

    return (
        <section className={`flex flex-col gap-4 ${className}`}>
            <header>
                <h2 className="font-semibold text-gray-900 text-sm">Hapus Akun</h2>
                <p className="mt-1 text-sm text-gray-500">
                    Setelah akun dihapus, seluruh data terkait akan dihapus permanen. Unduh data yang ingin kamu simpan sebelum melanjutkan.
                </p>
            </header>

            <Button variant="danger" onPress={() => setConfirmingUserDeletion(true)} className="self-start w-full sm:w-auto">
                <TrashIcon className="w-4 h-4" /> Hapus Akun
            </Button>

            <FormModal
                isOpen={confirmingUserDeletion}
                onOpenChange={(open) => !open && closeModal()}
                title="Yakin ingin menghapus akun?"
                subtitle="Masukkan kata sandi untuk mengonfirmasi. Data yang sudah dihapus tidak bisa dikembalikan."
                icon={<TrashIcon className="w-5 h-5" />}
                onSubmit={deleteUser}
                submitLabel="Hapus Akun"
                isSubmitting={processing}
            >
                <FullWidth>
                    <Field
                        label="Kata Sandi"
                        type="password"
                        value={data.password}
                        onChange={(v) => setData('password', v)}
                        placeholder="Masukkan kata sandi kamu"
                    />
                    {errors.password && <p className="text-sm text-red-600 mt-1">{errors.password}</p>}
                </FullWidth>
            </FormModal>
        </section>
    );
}