import { formClassName } from '@admin/components/ui/field-styles';
import { Modal } from '@admin/components/ui/modal';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { FacilityFormFields } from '@admin/pages/facilities/facility-form-fields';
import { useForm } from '@inertiajs/react';
import { FormEvent, useEffect } from 'react';

type FacilityRecord = {
    id: number;
    name?: string;
    icon?: string;
    sort_order?: number;
    status: boolean | number;
};

export default function EditFacility({ isOpen, onClose, initialData }: { isOpen: boolean; onClose: () => void; initialData: FacilityRecord | null }) {
    const { data, setData, put, processing, errors, reset } = useForm({
        name: '',
        icon: '',
        sort_order: 0,
        status: true,
    });

    useEffect(() => {
        if (!initialData) {
            return;
        }

        setData({
            name: initialData.name ?? '',
            icon: initialData.icon ?? '',
            sort_order: initialData.sort_order ?? 0,
            status: initialData.status === true || initialData.status === 1,
        });
    }, [initialData, setData]);

    const action = useFormResponse({
        onComplete: () => {
            reset();
            onClose();
        },
        loadingMessage: 'Saving changes...',
    });

    const handleSave = (event?: FormEvent) => {
        event?.preventDefault();

        if (!initialData) {
            return;
        }

        put(`/admin/api/update_facility/${initialData.id}`, {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    if (!isOpen) {
        return null;
    }

    return (
        <Modal isOpen={isOpen} onClose={onClose} title="Edit facility" primaryButtonText="Save changes" onPrimaryAction={handleSave} processing={processing}>
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <FacilityFormFields data={data} errors={errors} setData={setData} iconInputId="edit-facility-icon" statusId="edit-facility-status" />
            </form>
        </Modal>
    );
}