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

type PhraseRecord = { id: number; phrase?: string; sort_order?: number; status: boolean | number };

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

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