import React, { useEffect, useState } 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 TextArea from '@admin/ui/TextArea';
import WysiwygEditor from "@admin/ui/WysiwygEditor";
import SelectField from '@admin/ui/SelectField';
import { useFormResponse } from '@/hooks/useFormResponse';
import { toast, Toaster } from 'react-hot-toast';
export default function EditPortifolio({ isOpen, onClose, initialData }){
    const { data, setData, put, processing, errors, reset } = useForm();
    
    useEffect(() => {
        setData({
          name: initialData?.name || '',
          introduction: initialData?.introduction || '',
          feedback: initialData?.feedback|| '',
          status: initialData?.status || '',
          service_id: initialData?.service_id || '',
          description: initialData?.description || '',
          photo: initialData?.photo || '',
          images: initialData?.images || '',
          
        });
      }, [initialData, setData]);

    const [services, setServices] = useState([]);

    useEffect(() => {

        // Fetch services
        fetch('/api/services')
            .then((response) => response.json())
            .then((data) => setServices(data));

    }, []);


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

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

    const handleFileSuccess = (filename) =>{
        setData('images',filename);
    };

    const handleFileError = (error) => {
        console.log("Upload error: ", error)
    }
    
    const handleSave = (event) => {
        event.preventDefault();
        const formResponse = useFormResponse(reset);
        put(`/admin/api/update_portifolio/${initialData.id}`, {
          ...formResponse,
          preserveScroll: true,
        });
    
        onClose?.();
      };

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

                            <TextArea
                                label="Introduction"
                                placeholder="intro"
                                className="custom-textarea"
                                value={data.introduction}
                                onChange={(e) => setData('introduction', e.target.value)}
                            />


                            <TextArea
                                label="Positive feedback"
                                placeholder="Write brief feedbaack..."
                                className="custom-textarea"
                                value={data.feedback}
                                onChange={(e) => setData('feedback', e.target.value)}
                            /> 

                        </div> 
                        {/* Column Two   */}
                        <div className="col-lg-6">  

                            <SelectField label="Category" id="categories" 
                            options={services.map((service) => ({
                                label: service.title,
                                value: service.id,
                            }))}
                            onChange={(value) => setData('service_id', value)}  
                            value = {data.service_id}
                            /> 

                            <SelectField label="Status" id="status" 
                            options={[
                                { label: "Active", value: "active" },
                                { label: "Inactive", value: "inactive" },
                            ]}
                            onChange={(value) => setData("status", value)} 
                            value={data.status}
                            />
                        </div>
                    </div>
                    <div className='row'>
                        <div className="col-lg-12">
                            <div className="col-form-label" >Project overview:</div>
                            <WysiwygEditor
                                value={data.description}
                                onChange={description => setData('description', description)}
                                height={400}
                                placeholder="Write your description  here..."
                                toolbar="full" // or "minimal" or "standard"
                            /> 
                        </div>
                        <div className='col-lg-12'>
                            <FileUploadInput
                                label="Upload cover photo (1296px X 650px)"
                                inputId="customFileUpload"
                                buttonText={"Choose file"}
                                uploadUrl="/admin/api/portifolio/upload_image"
                                onSuccess={handleSuccess}
                                onError={handleError}
                                previewUrl={`/storage/${data.photo}`}
                            />

                            <FileUploadInput
                                label="Upload album, photo size (1296px X 650px)"
                                inputId="customFileUpload"
                                buttonText={"Choose file"}
                                uploadUrl="/admin/api/portifolio/upload_album"
                                onSuccess={handleFileSuccess}
                                onError={handleFileError}
                                previewUrl={`/storage/${data.images}`}
                            />

                        </div>
                    </div>
                </form>
      </Modal>
        </>
    );
}