import FormGroup from "@admin/ui/forms/FormGroup";
import Switch from "@admin/ui/forms/Switch";
import Modal from "@admin/ui/Modal";
import { useEffect } from "react";
import { useFormResponse } from '@/hooks/useFormResponse';
import { useForm } from "@inertiajs/react";

export default function EditService({ isOpen, onClose, initialData }){
    const {data, setData, put, processing, errors} = useForm({
        'title': '',
        'icon': '',
        'description': '',
        'display_order': 0,
        'status': true,
    });

    useEffect(() => {
        if (initialData) {
          setData({
              title: initialData?.title || '',
              icon: initialData?.icon || '',
              description: initialData?.description || '',
              display_order: initialData?.display_order || 0,
              status: initialData?.status === 1 || initialData?.status === true,
          });
        }
    }, [initialData, setData]);

    const handleSave = (event) => {
        event.preventDefault();
        const formResponse = useFormResponse(() => {
            onClose?.(); 
        });
        put(`/admin/api/update_service/${initialData.id}`, {
            preserveScroll: true,
                onSuccess: formResponse.onSuccess, 
                onError: formResponse.onError, 
            });
    };

    return(
        <>
        <Modal isOpen={isOpen} onClose={onClose} title="Edit Service" size="large"
        primaryButtonText="Save Changes"
        onPrimaryAction={handleSave}
        processing={processing}
        >
            <form onSubmit={handleSave}>
            <FormGroup label="Title" 
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            invalidFeedback={errors.title}
            />
            
            <FormGroup label="Icon" 
            value={data.icon}
            onChange={(e) => setData('icon', e.target.value)}
            helpText="Enter icon class name (e.g., flaticon-hotel, flaticon-restaurant)"
            invalidFeedback={errors.icon}
            />

            <FormGroup
            id="description"
            label="Description"
            as="textarea"
            value={data.description}
            onChange={(e) => setData("description", e.target.value)}
            rows="4"
            invalidFeedback={errors.description}
            />

            <FormGroup
            id="display_order"
            label="Display Order"
            type="number"
            value={data.display_order}
            onChange={(e) => setData("display_order", parseInt(e.target.value) || 0)}
            helpText="Lower numbers appear first"
            invalidFeedback={errors.display_order}
            />
            
            <Switch
            id="customSwitch"
            label="Active"
            checked={data.status}
            onChange={({ target: { checked } }) =>
                setData(prevData => ({ ...prevData, status: checked }))
                }                  
                />
                <br/>
            </form>

        </Modal>
        </>
    );
}