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

export default function Contact({ contact }) {
  const { data, setData, patch, processing, errors,reset } = useForm({
    email: '',
    phone: '',
    address: '',
    facebook: '',
    x: '',
    instagram: '',
    linkedin: '',
  });

  // Populate the form with the existing contact data when the component mounts or the contact prop changes.
  useEffect(() => {
    setData({
      email: contact?.email || '',
      phone: contact?.phone || '',
      address: contact?.address || '',
      facebook: contact?.facebook || '',
      x: contact?.x || '',
      instagram: contact?.instagram || '',
      linkedin: contact?.linkedin || '',
    });
  }, [contact, setData]);

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

  return (
    <>
      <div className="container py-5">
        <div className="card">
          <div className="card-header">
            <h2>Edit Contact Information</h2>
            <Toaster />
          </div>
          <div className="card-body">
            <form onSubmit={handleSave}>
              <div className="row">
                {/* Left Column */}
                <div className="col-lg-6">
                  <InputField
                    label="Email"
                    type="email"
                    id="email"
                    value={data.email}
                    onChange={(e) => setData('email', e.target.value)}
                    error={errors.email}
                  />
                  <InputField
                    label="Phone"
                    type="text"
                    id="phone"
                    value={data.phone}
                    onChange={(e) => setData('phone', e.target.value)}
                    error={errors.phone}
                  />
                  <InputField
                    label="Address"
                    type="text"
                    id="address"
                    value={data.address}
                    onChange={(e) => setData('address', e.target.value)}
                    error={errors.address}
                  />
                </div>
                {/* Right Column */}
                <div className="col-lg-6">
                  <InputField
                    label="Facebook"
                    type="url"
                    id="facebook"
                    value={data.facebook}
                    onChange={(e) => setData('facebook', e.target.value)}
                    error={errors.facebook}
                  />
                  <InputField
                    label="X (Twitter)"
                    type="url"
                    id="x"
                    value={data.x}
                    onChange={(e) => setData('x', e.target.value)}
                    error={errors.x}
                  />
                  <InputField
                    label="Instagram"
                    type="url"
                    id="instagram"
                    value={data.instagram}
                    onChange={(e) => setData('instagram', e.target.value)}
                    error={errors.instagram}
                  />
                  <InputField
                    label="LinkedIn"
                    type="url"
                    id="linkedin"
                    value={data.linkedin}
                    onChange={(e) => setData('linkedin', e.target.value)}
                    error={errors.linkedin}
                  />
                </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>
    </>
  );
}
