import { useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../app/store";
import { assistedRequestCall } from "../../app/reducers/assisted";
import { toast } from "react-toastify";

export default function RequestCall(){
    const dispatch = useDispatch<AppDispatch>();

    const [formData, setFormData] = useState({
        name: '',
        phone: '',
        whatsapp: ''
      });
    
      const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({
          ...prev,
          [name]: value
        }));
      };
    
      const handleSubmit = () => {
        dispatch(assistedRequestCall(formData))
        .unwrap()
        .then(() => {
          setFormData({
            name: '',
            phone: '',
            whatsapp: ''
          });
          toast.success('Request sent successfully!');
        });
      };
    
      return (
          <div className="bg-yellow-100 rounded-lg shadow-lg p-8 w-full max-w-md m-auto mt-5">
            <h2 className="text-2xl font-bold text-gray-800 text-center mb-6">
              Get Free Consultation
            </h2>
            
            <div className="space-y-4">
              <div>
                <input
                  type="text"
                  name="name"
                  placeholder="Name"
                  value={formData.name}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent placeholder-gray-500"
                />
              </div>
              
              <div>
                <input
                  type="tel"
                  name="phone"
                  placeholder="Phone Number"
                  value={formData.phone}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent placeholder-gray-500"
                />
              </div>
              
              <div>
                <input
                  type="tel"
                  name="whatsapp"
                  placeholder="WhatsApp Number"
                  value={formData.whatsapp}
                  onChange={handleInputChange}
                  className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent placeholder-gray-500"
                />
              </div>
              
              <button
                onClick={handleSubmit}
                className="w-full bg-red-400 hover:bg-red-500 text-white font-semibold py-3 px-6 rounded-md transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50"
              >
                Request Call
              </button>
            </div>
          </div>
      );
}