import React, { useEffect } from 'react';
import { useForm } from '@inertiajs/react';
import Modal from '@admin/ui/Modal';
import InputField from "@admin/ui/InputField";
import FileUploadInput from '@admin/ui/FileUploadInput';
import WysiwygEditor from "@admin/ui/WysiwygEditor";
import SelectField from '@admin/ui/SelectField';
import CountrySelect from '@admin/ui/CountrySelect';
import { useFormResponse } from '@/hooks/useFormResponse';
import { toast, Toaster } from 'react-hot-toast';
export default function EditClient({ isOpen, onClose, initialData }){
    const { data, setData, put, processing, errors, reset } = useForm({
        name: '',
        country: '',
        photo:'',
        comment: '',
        status: '',
    });
    
    useEffect(() => {
        setData({
          name: initialData?.name || '',
          country: initialData?.country || '',
          comment: initialData?.comment || '',
          status: initialData?.status || '',
          photo: initialData?.photo || '',
          
        });
      }, [initialData, setData]);
    
    const handleSave = (event) => {
    event.preventDefault();
    const formResponse = useFormResponse(reset);
    put(`/admin/api/update_client/${initialData.id}`, {
        ...formResponse,
        preserveScroll: true,
    });

    onClose?.();
    };

    const handleSuccess = (filename) => {
        setData('photo',filename);
    };

    const handleError = (error) => {
            console.error("Upload error:", error);
        };

    
    return(
        <>
        <Toaster />
        <Modal
        isOpen={isOpen}
        onClose={onClose}
        title={`Edit ${initialData?.name}`} 
        size="large"
        primaryButtonText="Save Changes"
        onPrimaryAction={handleSave}
        >
            <form onSubmit={handleSave}>
                    <div className='row'>
                        {/* Column one */}
                        <div className="col-lg-6">
                            <InputField label="Name" type="text" id="title" 
                            value={data.name}
                            onChange={(e) => setData('name', e.target.value)}/>   

                            <CountrySelect 
                            label="Country" 
                            id="subtitle"
                            value={data.country}
                            onChange={(value) => setData('country', value)}
                            />  

                            <SelectField label="Status" id="status" 
                            options={[
                                { label: "Active", value: "active" },
                                { label: "Inactive", value: "inactive" },
                            ]}
                            onChange={(value) => setData("status", value)} 
                            value={data.status}
                            />
                            <FileUploadInput
                                label="Upload client logo (199x199)"
                                inputId="customFileUpload"
                                buttonText={"Choose file"}
                                uploadUrl="/admin/api/client/upload_image"
                                onSuccess={handleSuccess}
                                onError={handleError}
                                previewUrl={`/storage/${data.photo}`}
                            />
                        </div> 
                        {/* Column Two   */}
                        <div className="col-lg-6">
                            <div className="col-form-label" >Comment:</div>
                            <WysiwygEditor
                                value={data.comment}
                                onChange={comment => setData('comment', comment)}
                                height={300}
                                placeholder="Write your comment here..."
                                toolbar="full" // or "minimal" or "standard"
                            /> 
                        </div>
                    </div>
                </form>
        </Modal>
        </>
    );
}