import axios from "axios";
import React, { useState } from "react";
import baseUrl from "../../../array/base/config";
import { toast } from "react-toastify";
const relationshipOptions = ["Spouse", "Daughter", "Son", "Brother", "Sister"];
/**
 * EditFamilyMember component for editing family member information.
 * @param {Object} props - The component's props.
 * @param {Object} props.member - The family member's data to edit.
 * @param {Function} props.setShowCurrent - Function to set the current view.
 * @returns {JSX.Element} - React component.
 */
const EditFamilyMember = ({ member, setShowCurrent}) => {
  const [relationship, setRelationship] = useState(member?.relationship);
  const [firstName, setFirstName] = useState(member?.first_name);
  const [middleName, setMiddleName] = useState(member?.middle_name);
  const [lastName, setLastName] = useState(member?.last_name);
  const [phone, setPhone] = useState(member?.phone_number);
  const [birthdate, setBirthdate] = useState(member?.birth_date);
  const [document_file, setDocument_file] = useState(member?.document_file);
  const [documentFileChanged, setDocumentFileChanged] = useState(false)

  const handleRelationship = (e) => {
    setRelationship(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 handlePhoneNumberChange = (e) => {
    setPhone(e.target.value);
  };
  const handleBirthdateChange = (e) => {
    setBirthdate(e.target.value);
  };
  const handleFileChange = (e) => {
    setDocumentFileChanged(true)
    const document = e.target.files[0];
    setDocument_file(document);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(
      relationship,
      firstName,
      middleName,
      lastName,
      phone,
      birthdate
    );
    const formData = new FormData();
    relationship && formData.append("relationship", relationship);
    firstName && formData.append("first_name", firstName);
    middleName && formData.append("middle_name", middleName);
    lastName && formData.append("last_name", lastName);
    phone && formData.append("phone_number", phone);
    birthdate && formData.append("birth_date", birthdate);
    document_file && formData.append("document_file", document_file);

    const detail = localStorage.getItem("token");
    axios
      .put(`${baseUrl}/api/shareholderfamily/${member.id}/`, formData, {
        headers: {
          Authorization: `Token ${detail}`,
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        console.log(response);
        toast.success("Family member updated successfully!", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        setShowEditForm((prev) => !prev);
      })
      .catch((error) => {
        console.error("Edit form error", error);
        toast.error("Family member 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-4">
                <div className="sharetransfer_form_group">
                      <label htmlFor="relationship">Relationship:</label>
                      <select
                        id="relationship"
                        defaultValue={member?.relationship}
                        onChange={handleRelationship}
                        required
                      >
                        <option>Select relationship</option>
                        {relationshipOptions.map((option) => (
                          <option key={option} value={option}>
                            {option}
                          </option>
                        ))}
                      </select>
                    </div>
             </div>
             <div className="col-lg-4">
                <div className="sharetransfer_form_group">
                    <label htmlFor="firstName">First Name:</label>
                    <input
                      type="text"
                      id="firstName"
                      onChange={handleFirstNameChange}
                      defaultValue={member.first_name}
                      required
                    />
                </div>
             </div>
             <div className="col-lg-4">
                <div className="sharetransfer_form_group">
                    <label htmlFor="middleName">Middle Name:</label>
                    <input
                      type="text"
                      id="middleName"
                      defaultValue={member?.middle_name}
                      onChange={handleMiddleNameChange}
                    />
                </div>
             </div>
             <div className="col-lg-4">
                 <div className="sharetransfer_form_group">
                    <label htmlFor="lastName">Last Name:</label>
                    <input
                      type="text"
                      id="lastName"
                      onChange={handleLastNameChange}
                      defaultValue={member?.last_name}
                      required
                    />
                 </div>
             </div>
             <div className="col-lg-4">
                <div className="sharetransfer_form_group">
                    <label htmlFor="">Phone number: </label>
                    <input
                      type="number"
                      placeholder=""
                      defaultValue={member?.phone_number}
                      onChange={handlePhoneNumberChange}
                    />
                </div>
             </div>
             <div className="col-lg-4">
                <div className="sharetransfer_form_group">
                    <label htmlFor="birthdate">Birth date:</label>
                    <input
                      type="date"
                      id="birthdate"
                      name="birthdate"
                      defaultValue={member?.birth_date}
                      onChange={handleBirthdateChange}
                    />
                </div>
             </div>
             <div className="col-lg-3">
                <label style={{ marginRight: "10px" }} htmlFor="file">
                     Document File:
                </label>
                {document_file && (
          <input type="file" id="file" onChange={handleFileChange} />
        )}
                    <div className="sharetransfer_form_group_img">
                    {
          !document_file ?(<input type="file" id="file" onChange={handleFileChange} />): 
            documentFileChanged?
              document_file?.name?.split(".").pop() === "pdf" ? (
                <img src="/pdf_logo.jpg" alt="PDF icon" />
              ) : (
                <img
                  src={URL.createObjectURL(document_file)}
                  alt="Selected file"
                />
              ):document_file?.split(".").pop() === "pdf" ? (
                <img src="/pdf_logo.jpg" alt="PDF icon" />
              ) : (
                <img
                  src={document_file}
                  alt="Selected file"
                />)
          
        }
             </div>
             </div>
        </div>
        <div className="row">
              <div className="form-footer d-md-flex justify-end align-items-center">
                  <div className=" cancel-btn me-3">
                      <button
                        onClick={() => setShowCurrent("Family List")}
                      >
                        Cancel
                      </button>
                  </div>
                  <div className="sharetransfer_button">
                      <button type="submit">Update</button>
                  </div>
              </div>
        </div>        
      </form>
      
    </div>
  );
};
export default EditFamilyMember;