import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateUser } from "../redux/features/authSlice";
import { useNavigate } from "react-router-dom";
import FileBase from "react-file-base64";

const UserProfile = () => {
  const { user, isLoading, error } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [formData, setFormData] = useState({
    userId: user?.result?.userId || "",
    title: user?.result?.title || "",
    firstName: user?.result?.firstName || "",
    middleName: user?.result?.middleName || "",
    lastName: user?.result?.lastName || "",
    email: user?.result?.email || "",
    aboutme: user?.result?.aboutme || "",
    city: user?.result?.city || "",
    state: user?.result?.state || "",
    county: user?.result?.county || "",
    zip: user?.result?.zip || "",
    profileImage: user?.result?.profileImage || "", // For storing the image
  });

  useEffect(() => {
    if (user) {
      setFormData({
        userId: user.result.userId,
        title: user.result.title,
        firstName: user.result.firstName,
        middleName: user.result.middleName,
        lastName: user.result.lastName,
        email: user.result.email,
        aboutme: user.result.aboutme,
        city: user.result.city,
        state: user.result.state,
        county: user.result.county,
        zip: user.result.zip,
        profileImage: user.result.profileImage,
      });
    }
  }, [user]);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleImageDelete = () => {
    setFormData({ ...formData, profileImage: "" }); // Reset the profileImage field
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(updateUser(formData)); // Dispatching updateUser with form data
    navigate("/login");
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div className="col-4">
          Title
          <select
            className="form-floating mb-3 form-control"
            aria-label="Default select example"
            name="title"
            value={formData.title}
            onChange={handleChange}
          >
            <option value="None">Please Select Title</option>
            <option value="Dr">Dr</option>
            <option value="Prof">Prof</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>

        <div className="col-4">
          <div className="form-floating mb-3">
            First Name
            <input
              type="text"
              className="form-control"
              placeholder="First Name"
              required="required"
              name="firstName"
              value={formData.firstName}
              onChange={handleChange}
            />
          </div>
        </div>

        <div className="col-4">
          <div className="form-floating mb-3">
            Middle Name
            <input
              type="text"
              className="form-control"
              placeholder="Middle Name"
              required="required"
              name="middleName"
              value={formData.middleName}
              onChange={handleChange}
            />
          </div>
        </div>

        <div className="col-4">
          <div className="form-floating mb-3">
            Last Name
            <input
              type="text"
              className="form-control"
              placeholder="Last Name"
              required="required"
              name="lastName"
              value={formData.lastName}
              onChange={handleChange}
            />
          </div>
        </div>

        <div className="col-4">
          <div className="form-floating mb-3">
            Email
            <input
              type="text"
              className="form-control"
              placeholder="Email"
              required="required"
              name="email"
              value={formData.email}
              onChange={handleChange}
              disabled
            />
          </div>
        </div>

        <div className="col-4">
          <div className="form-floating mb-3">
            About me
            <textarea
              type="text"
              id="aboutme"
              name="aboutme"
              className="form-control h-100"
              value={formData.aboutme}
              onChange={handleChange}
            />
          </div>
        </div>

        <div className="col-4">
                    <div className="form-floating mb-3">
                      City
                      <input
                        type="text"
                        className="form-control"
                        name="city"
                        placeholder="city"
                        value={formData.city}
                        onChange={handleChange}
                        required
                      />
                    </div>
                  </div>

                  <div className="col-md-4">
                    <div className="form-floating mb-3">
                      State
                      <select
                        className="form-floating mb-3 form-control"
                        name="state"
                        value={formData.state}
                        onChange={handleChange}
                        required
                      >
                        <option value="">Please Select State</option>
                        <option value="Alaska">Alaska</option>
                        <option value="Alabama">Alabama</option>
                        <option value="Arkansas">Arkansas</option>
                        <option value="Arizona">Arizona</option>
                        <option value="California">California</option>
                        <option value="Colorado">Colorado</option>
                        <option value="Connecticut">Connecticut</option>
                        <option value="District Of Columbia">
                          District Of Columbia
                        </option>
                        <option value="Delaware">Delaware</option>
                        <option value="Florida">Florida</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Hawaii">Hawaii</option>
                        <option value="Iowa">Iowa</option>
                        <option value="Idaho">Idaho</option>
                        <option value="Illinois">Illinois</option>
                        <option value="Indiana">Indiana</option>
                        <option value="Kansas">Kansas</option>
                        <option value="Kentucky">Kentucky</option>
                        <option value="Louisiana">Louisiana</option>
                        <option value="Massachusetts">Massachusetts</option>
                        <option value="Maryland">Maryland</option>
                        <option value="Michigan">Michigan</option>
                        <option value="Minnesota">Minnesota</option>
                        <option value="Missouri">Missouri</option>
                        <option value="Mississippi">Mississippi</option>
                        <option value="Montana">Montana</option>
                        <option value="North Carolina">North Carolina</option>
                        <option value="North Dakota">North Dakota</option>
                        <option value="Nebraska">Nebraska</option>
                        <option value="New Hampshire">New Hampshire</option>
                        <option value="New Jersey">New Jersey</option>
                        <option value="New Mexico">New Mexico</option>
                        <option value="Nevada">Nevada</option>
                        <option value="New York">New York</option>
                        <option value="Ohio">Ohio</option>
                        <option value="Oklahoma">Oklahoma</option>
                        <option value="Oregon">Oregon</option>
                        <option value="Pennsylvania">Pennsylvania</option>
                        <option value="Rhode Island">Rhode Island</option>
                        <option value="South Carolina">South Carolina</option>
                        <option value="South Dakota">South Dakota</option>
                        <option value="Tennessee">Tennessee</option>
                        <option value="Texas">Texas</option>
                        <option value="Utah">Utah</option>
                        <option value="Virginia">Virginia</option>
                        <option value="Vermont">Vermont</option>
                        <option value="Washington">Washington</option>
                        <option value="Wisconsin">Wisconsin</option>
                        <option value="West Virginia">West Virginia</option>
                        <option value="Wyoming">Wyoming</option>
                      </select>
                    </div>
                  </div>

                  <div className="col-md-4">
                    County
                    <select
                      className="form-floating mb-3 form-control"
                      name="county"
                      value={formData.county}
                      onChange={handleChange}
                      required
                    >
                      <option value="">Please Select County</option>
                      <option value="Abbeville">Abbeville</option>
                      <option value="Aiken">Aiken</option>
                      <option value="Allendale">Allendale</option>
                      <option value="Anderson">Anderson</option>
                      <option value="Bamberg">Bamberg</option>
                      <option value="Barnwell">Barnwell</option>
                      <option value="Beaufort">Beaufort</option>
                      <option value="Berkeley">Berkeley</option>
                      <option value="Calhoun">Calhoun</option>
                      <option value="Charleston">Charleston</option>
                      <option value="Cherokee">Cherokee</option>
                      <option value="Chester">Chester</option>
                      <option value="Chesterfield">Chesterfield</option>
                      <option value="Clarendon">Clarendon</option>
                      <option value="Colleton">Colleton</option>
                      <option value="Darlington">Darlington</option>
                      <option value="Dillon">Dillon</option>
                      <option value="Dorchester">Dorchester</option>
                      <option value="Edgefield">Edgefield</option>
                      <option value="Fairfield">Fairfield</option>
                      <option value="Florence">Florence</option>
                      <option value="Georgetown">Georgetown</option>
                      <option value="Greenville">Greenville</option>
                      <option value="Greenwood">Greenwood</option>
                      <option value="Hampton">Hampton</option>
                      <option value="Horry">Horry</option>
                      <option value="Jasper">Jasper</option>
                      <option value="Kershaw">Kershaw</option>
                      <option value="Lancaster">Lancaster</option>
                      <option value="Laurens">Laurens</option>
                      <option value="Lee">Lee</option>
                      <option value="Lexington">Lexington</option>
                      <option value="Marion">Marion</option>
                      <option value="Marlboro">Marlboro</option>
                      <option value="McCormick">McCormick</option>
                      <option value="Newberry">Newberry</option>
                      <option value="Oconee">Oconee</option>
                      <option value="Orangeburg">Orangeburg</option>
                      <option value="Pickens">Pickens</option>
                      <option value="Richland">Richland</option>
                      <option value="Saluda">Saluda</option>
                      <option value="Spartanburg">Spartanburg</option>
                      <option value="Sumter">Sumter</option>
                      <option value="Union">Union</option>
                      <option value="Williamsburg">Williamsburg</option>
                      <option value="York">York</option>
                    </select>
                  </div>

                  <div className="col-4">
                    <div className="form-floating mb-3">
                      Zip
                      <input
                        type="text"
                        className="form-control"
                        name="zip"
                        placeholder="zip"
                        value={formData.zip}
                        onChange={handleChange}
                        required
                      />
                    </div>
                  </div>

        {/* Profile Image Upload Section */}
        <div className="col-4">
          <label>Profile Image</label>
          <div className="mb-3">
            <FileBase
              type="file"
              multiple={false}
              onDone={({ base64 }) =>
                setFormData({ ...formData, profileImage: base64 })
              }
            />
          </div>
        </div>

        {/* Display Preview of Uploaded Image */}
        {formData.profileImage && (
          <div className="col-4 mb-3">
            <img
              src={formData.profileImage}
              alt="Profile Preview"
              style={{ width: "150px", height: "150px", borderRadius: "50%" }}
            />
            {/* Delete Image Button */}
            <button
              type="button"
              className="btn btn-danger mt-2"
              onClick={handleImageDelete}
            >
              Delete Image
            </button>
          </div>
        )}

        <div className="col-12">
          <div className="d-grid">
            <button
              className="btn btn-primary btn-lg"
              type="submit"
              style={{
                backgroundColor: "#fda417",
                border: "#fda417",
              }}
              disabled={isLoading}
            >
              {isLoading ? "Updating..." : "Update"}
            </button>
          </div>
        </div>
        {error && <p>{error}</p>}
      </form>
    </>
  );
};

export default UserProfile;