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

type RoomRecord = {
    id: number;
    name: string;
    summary?: string;
    description?: string;
    occupancy?: number | string | null;
    bed_configuration?: string;
    nightly_rate?: string | number;
    featured_image?: string;
    gallery?: string[];
    amenities?: string;
    house_rules?: string;
    units?: string;
    sort_order?: number;
    status: boolean | number;
};

type EditRoomProps = {
    isOpen: boolean;
    onClose: () => void;
    initialData: RoomRecord | null;
    tzsPerUsd: string | null;
};

export default function EditRoom({ isOpen, onClose, initialData, tzsPerUsd }: EditRoomProps) {
    const { data, setData, put, processing, errors, reset } = useForm({
        name: '',
        summary: '',
        description: '',
        occupancy: '' as number | string,
        bed_configuration: '',
        nightly_rate: '',
        featured_image: '',
        gallery: [] as string[],
        amenities: '',
        house_rules: '',
        units: '',
        sort_order: 0,
        status: true,
    });

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

        setData({
            name: initialData.name ?? '',
            summary: initialData.summary ?? '',
            description: initialData.description ?? '',
            occupancy: initialData.occupancy ?? '',
            bed_configuration: initialData.bed_configuration ?? '',
            nightly_rate: initialData.nightly_rate != null ? String(initialData.nightly_rate) : '',
            featured_image: initialData.featured_image ?? '',
            gallery: initialData.gallery ?? [],
            amenities: initialData.amenities ?? '',
            house_rules: initialData.house_rules ?? '',
            units: initialData.units ?? '',
            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_room/${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 room"
            primaryButtonText="Save changes"
            onPrimaryAction={handleSave}
            processing={processing}
        >
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <RoomFormFields
                    data={data}
                    errors={errors}
                    setData={setData}
                    tzsPerUsd={tzsPerUsd}
                    imageInputId="edit-room-featured"
                    galleryInputId="edit-room-gallery"
                    statusId="edit-room-status"
                />
            </form>
        </Modal>
    );
}