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

type SliderRecord = {
    id: number;
    title: string;
    description?: string | null;
    link?: string | null;
    counter_value?: string | null;
    counter_text?: string | null;
    image?: string | null;
    video?: string | null;
    status: boolean | number;
    sort_order?: number;
};

type EditSliderProps = {
    isOpen: boolean;
    onClose: () => void;
    initialData: SliderRecord | null;
};

export default function EditSlider({ isOpen, onClose, initialData }: EditSliderProps) {
    const { data, setData, put, processing, errors, reset, transform } = useForm({
        title: '',
        description: '',
        link: '',
        counter_value: '',
        counter_text: '',
        status: true,
        sort_order: 0,
        image: '',
        video: '',
        media_type: 'image' as 'image' | 'video',
    });

    transform((payload) => {
        const { media_type: _mediaType, ...rest } = payload;

        return rest;
    });

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

        setData({
            title: initialData.title ?? '',
            description: initialData.description ?? '',
            link: initialData.link ?? '',
            counter_value: initialData.counter_value ?? '',
            counter_text: initialData.counter_text ?? '',
            status: initialData.status === true || initialData.status === 1,
            sort_order: initialData.sort_order ?? 0,
            image: initialData.image ?? '',
            video: initialData.video ?? '',
            media_type: initialData.video ? 'video' : 'image',
        });
    }, [initialData, setData]);

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

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

        if (!initialData) {
            return;
        }

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

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Edit slider"
            primaryButtonText="Save changes"
            onPrimaryAction={handleSave}
            processing={processing}
        >
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <SliderFormFields
                    data={data}
                    errors={errors}
                    setData={setData}
                    imageInputId="edit-slider-image"
                    videoInputId="edit-slider-video"
                />
            </form>
        </Modal>
    );
}