import React, { useEffect } from 'react';
import { useForm } from '@inertiajs/react';
import { useFormResponse } from '@/hooks/useFormResponse';
import FileUploadInput from '@/Components/Admin/ui/FileUploadInput';
import { toast,Toaster } from 'react-hot-toast';

export default function HomeImage({ homeimage }) {
  const { data, setData, patch, processing, errors,reset } = useForm({
    help: '',
    approach: '',
    product: '',
  });

  // Populate the form with the existing homeimage data when the component mounts or the homeimage prop changes.
  useEffect(() => {
    setData({
      help: homeimage?.help || '',
      approach: homeimage?.approach || '',
      product: homeimage?.product || '',
    });
  }, [homeimage, setData]);

    const handleHelpSuccess = (filename) => {
            setData('help',filename);
        };
    const handleApproachSuccess = (filename) => {
        setData('approach',filename);
    };

    const handleProductSuccess = (filename) => {
        setData('product',filename);
    };

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

  // Handle form submission.
  const handleSave = (event) => {
    event.preventDefault();
    const formResponse = useFormResponse(reset);
    patch('/admin/update_homeimage', {
        ...formResponse,
        preserveScroll: true,
    });
  };

  return (
    <>
      <div className="container py-5">
        <div className="card">
          <div className="card-header">
            <h2>Edit Home Images</h2>
            <Toaster />
          </div>
          <div className="card-body">
            <form onSubmit={handleSave}>
              <div className="row">
                <div className="col-lg-12">
                <FileUploadInput
                    label="Upload Help Section Image (458x558)"
                    inputId="customFileUpload"
                    buttonText={"Choose file"}
                    uploadUrl="/admin/api/upload_help"
                    onSuccess={handleHelpSuccess}
                    onError={handleError}
                    previewUrl={`/storage/${data.help}`}

                />

                <FileUploadInput
                    label="Upload Approach Section Image (833x1024)"
                    inputId="customFileUpload"
                    buttonText={"Choose file"}
                    uploadUrl="/admin/api/upload_approach"
                    onSuccess={handleApproachSuccess}
                    onError={handleError}
                    previewUrl={`/storage/${data.approach}`}

                />

                <FileUploadInput
                    label="Upload Our Solutions  Section Image (532x555)"
                    inputId="customFileUpload"
                    buttonText={"Choose file"}
                    uploadUrl="/admin/api/upload_serve_product"
                    onSuccess={handleProductSuccess}
                    onError={handleError}
                    previewUrl={`/storage/${data.product}`}

                />
                  
                </div>
              </div>
              <div className="mt-4">
                <button type="submit" className="btn btn-primary" disabled={processing}>
                  {processing ? 'Saving...' : 'Save Changes'}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
