import axios from "axios";
import React, { useState } from "react";
import baseUrl from "../../../array/base/config";
import "../Sharetransferrequests/sharetransferrequest.css";
import { toast } from "react-toastify";

const salutationOptions = [
  { label: "Mr.", value: "MR" },
  { label: "Mrs.", value: "MS" },
  { label: "Prof.", value: "PROF" },
  { label: "Dr.", value: "DR" },
];

const maritalStatusOptions = [
  { label: "Single", value: "SINGLE" },
  { label: "Married", value: "MARRIED" },
  { label: "Divorced", value: "DIVORCED" },
  { label: "Widowed", value: "WIDOWED" },
  { label: "Separated", value: "SEPARATED" },
  { label: "Other", value: "OTHER" },
];

const genderOptions = [
  { label: "Male", value: "MALE" },
  { label: "Female", value: "FEMALE" },
  { label: "Other", value: "OTHER" },
];
/**
 * ShareholderEditForm component for editing user profile information.
 * @param {Object} props - The component's props.
 * @param {Object} props.user - The user's information.
 * @param {Object} props.userroles - The user's roles.
 * @param {Function} props.setEdit - Function to toggle edit mode.
 * @param {Function} props.apicall - Function to make an API call.
 * @param {boolean} props.edit - Edit mode flag.
 * @returns {JSX.Element} - React component.
 */
const ShareholderEditForm = ({ user, userroles, setEdit, apicall, edit }) => {
  const [salutation, setSalutation] = useState();
  const [firstName, setFirstName] = useState();
  const [middleName, setMiddleName] = useState();
  const [lastName, setLastName] = useState();
  const [fatherorSpouseName, setFatherorSpouseName] = useState();
  const [selectedDate, setSelectedDate] = useState();
  const [citizenshipNumber, setCitizenshipNumber] = useState();
  const [panNumber, setPanNumber] = useState();
  const [gender, setGender] = useState(user?.gender_type);
  const [maritalStatus, setMaritalStatus] = useState();
  // const [photo, setPhoto] = useState(user?.photo);

  const [selectedValue, setSelectedValue] = useState("option1"); // Set the default value here

  const handleRadioChange = (event) => {
    setSelectedValue(event.target.value);
  };

  const handleSalutationChange = (e) => {
    setSalutation(e.target.value);
  };

  const handleFirstNameChange = (e) => {
    setFirstName(e.target.value);
  };

  const handleMiddleNameChange = (e) => {
    setMiddleName(e.target.value);
  };
  const handleLastNameChange = (e) => {
    setLastName(e.target.value);
  };
  const handleFatherorSpouseNameChange = (e) => {
    setFatherorSpouseName(e.target.value);
  };

  const handleBirthdateChange = (e) => {
    setSelectedDate(e.target.value);
  };

  const handleCitizenshipNumberChange = (e) => {
    setCitizenshipNumber(e.target.value);
  };

  const handlePanNumberChange = (e) => {
    setPanNumber(e.target.value);
  };

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  const handleMaritalStatusChange = (e) => {
    setMaritalStatus(e.target.value);
  };

  //   const handlePhotoChange = (e) => {
  //     setPhoto(e.target.files[0]);
  //   };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(
      salutation,
      firstName,
      lastName,
      fatherorSpouseName,
      selectedDate,
      citizenshipNumber,
      panNumber,
      gender,
      maritalStatus
      // photo,
    );
    const formData = new FormData();
    salutation && formData.append("salutation", salutation);
    firstName && formData.append("first_name", firstName);
    middleName && formData.append("middle_name", middleName);
    lastName && formData.append("last_name", lastName);
    fatherorSpouseName &&
      formData.append("father_name_or_spouse_name", fatherorSpouseName);
    selectedDate && formData.append("birth_date_bs", selectedDate);
    citizenshipNumber &&
      formData.append("citizenship_number", citizenshipNumber);
    panNumber && formData.append("pan_number", panNumber);
    gender && formData.append("gender_type", gender);
    maritalStatus && formData.append("marital_status", maritalStatus);
    // formData.append("photo", photo);

    // console.log(`api patch ${baseUrl}/api/shareholder/${user.id}`);

    const detail = localStorage.getItem("token");
    axios
      .patch(`${baseUrl}/api/shareholder/${user.id}/`, formData, {
        headers: {
          Authorization: `Token ${detail}`,
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        apicall();
        toast.success("Your profile  has been updated successfully!", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        setEdit((prev) => !prev);

        // handle successful response
      })
      .catch((error) => {
        console.error("Edit form error", error);
        toast.error("Your profile could not be updated. Please try again.", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        // handle error
      });
  };

  return (
    <div className="sharetransfer_card">
      <form onSubmit={handleSubmit}>
        <div className="row">
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="salutation">Salutation:</label>
              <select
                id="salutation"
                defaultValue={user?.salutation}
                onChange={handleSalutationChange}
              >
                <option value="">Select a salutation</option>
                {salutationOptions.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="firstName">First Name:</label>
              <input
                type="text"
                id="firstName"
                defaultValue={user?.first_name}
                onChange={handleFirstNameChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="middleName">Middle Name:</label>
              <input
                type="text"
                id="middleName"
                defaultValue={user?.middle_name}
                onChange={handleMiddleNameChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="lastName">Last Name:</label>
              <input
                type="text"
                id="lastName"
                defaultValue={user?.last_name}
                onChange={handleLastNameChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="father_name_or_spouse_name">
                Father/Spouse Name:
              </label>
              <input
                type="text"
                id="father_name_or_spouse_name"
                defaultValue={user?.father_name_or_spouse_name}
                onChange={handleFatherorSpouseNameChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="birthdate">Birth date:</label>
              <input
                type="date"
                id="birthdate"
                name="birthdate"
                onChange={handleBirthdateChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="citizenshipNumber">Citizenship Number:</label>
              <input
                type="text"
                id="citizenship"
                defaultValue={user?.citizenship_number}
                onChange={handleCitizenshipNumberChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="panNumber">PAN Number:</label>
              <input
                type="text"
                id="panNumber"
                defaultValue={user?.pan_number}
                onChange={handlePanNumberChange}
                readOnly={userroles?.is_shareholder}
              />
            </div>
          </div>
          {/* <div className="col-lg-3">
                  <div className="sharetransfer_form_group_radio">
                        <label htmlFor="gender">Gender:</label>
                        <input
                          type="radio"
                          id="gender-male"
                          name="gender"
                          value="MALE"
                          // disabled={userroles?.is_shareholder}
                          checked={gender === "MALE"}
                          onChange={handleGenderChange}
                        />
                        <label htmlFor="gender-male">Male</label>
                        <input
                          type="radio"
                          id="gender-female"
                          name="gender"
                          value="FEMALE"
                          // disabled={userroles?.is_shareholder}
                          checked={gender === "FEMALE"}
                          onChange={handleGenderChange}
                        />
                        <label htmlFor="gender-female">Female</label>
                        <input
                          type="radio"
                          id="gender-other"
                          name="gender"
                          value="OTHER"
                          // disabled={userroles?.is_shareholder}
                          checked={gender === "OTHER"}
                          onChange={handleGenderChange}
                        />
                        <label htmlFor="gender-other">Other</label>
                  </div>
            </div> */}
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="genderOptions">Gender:</label>
              <select
                id="genderOptions"
                defaultValue={user?.gender_type}
                onChange={handleGenderChange}
              >
                <option value="">Select your gender</option>
                {genderOptions.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div className="col-lg-3">
            <div className="sharetransfer_form_group">
              <label htmlFor="maritalStatus">Marital Status:</label>
              <select
                id="maritalStatus"
                defaultValue={user?.marital_status}
                onChange={handleMaritalStatusChange}
              >
                <option value="">Select a marital status</option>
                {maritalStatusOptions.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
        <div className="row d-flex justify-end">
          <div className="form-footer d-md-flex justify-end">
            <div className=" ">
              <button
                type="submit"
                className="cancel-btn"
                onClick={() => {
                  setEdit(false);
                }}
              >
                Cancel
              </button>
            </div>
            <div className=" ">
              <button type="submit" className="sharetransfer_button">
                Update
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default ShareholderEditForm;