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

type FaqRecord = { id: number; question?: string; answer?: string; sort_order?: number; status: boolean | number };

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

    useEffect(() => {
        if (!initialData) {
            return;
        }
        setData({
            question: initialData.question ?? '',
            answer: initialData.answer ?? '',
            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_faq/${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 question" primaryButtonText="Save changes" onPrimaryAction={handleSave} processing={processing}>
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <FaqFormFields data={data} errors={errors} setData={setData} statusId="edit-faq-status" />
            </form>
        </Modal>
    );
}