import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import ShareholderEditForm from "./ShareholderEditForm";
import { Button } from "antd";
/**
 * DetailsForm component for displaying and editing personal information.
 * @param {Object} props - The component's props.
 * @param {Object} props.user - The user's data to display and edit.
 * @param {Object} props.userroles - The user's roles and permissions.
 * @param {Function} props.setEdit - Function to toggle edit mode.
 * @param {Function} props.apicall - Function to trigger an API call.
 * @param {boolean} props.edit - Flag to determine if the form is in edit mode.
 * @returns {JSX.Element} - React component.
 */
const DetailsForm = ({ user, userroles, setEdit, apicall, edit }) => {
  const [filterAddress, setFilteredAddress] = useState();
  const getFilteredAddress = () => {
    const filterAddress =
      user &&
      user?.shareholder_address?.filter(
        (dat) => dat.address_type == "PERMANENT"
      );

    if (!filterAddress) {
      return ""; // Return an empty string if user or filterAddress is not available
    }

    const addressString = `${filterAddress[0]?.province?.name || ""} ${
      filterAddress[0]?.district?.name || ""
    } ${filterAddress[0]?.municipality?.name || ""}`;

    return addressString.trim();
  };
  const handleEdit = () => {
    setEdit((prev) => !prev);
  };

  // getFilteredAddress();

  return (
    <>
      <div className=" d-flex justify-between">
        <h2 className="main-title">
          Personal <span>Information</span>{" "}
        </h2>
        {!edit && (
          <Button
            onClick={() => {
              handleEdit();
            }}
          >
            <ion-icon name="pencil"></ion-icon>
            Edit
          </Button>
        )}
      </div>

      <div className="shareholder_body">
        {!edit && (
          <div className="shareholder_details_div">
            <div className="shareholder_left_div">
              <div className="shareholder_info">
                <h3>First Name :</h3>
                <h6>{user?.first_name}</h6>
              </div>
              <div className="shareholder_info">
                <h3>Last Name : </h3>
                <h6> {user?.last_name} </h6>
              </div>
              <div className="shareholder_info">
                <h3> Gender : </h3>
                <h6>{user?.gender_type} </h6>
              </div>
              <div className="shareholder_info">
                <h3>Marital Status : </h3>
                <h6>{user?.marital_status} </h6>
              </div>
              {user?.birth_date_ad !== null && (
                <div className="shareholder_info">
                  <h3>Birth Date (AD) : </h3>
                  <h6>{user?.birth_date_ad} </h6>
                </div>
              )}
            </div>

            <div className="shareholder_left_div">
              {user?.middle_name !== null && (
                <div className="shareholder_info">
                  <h3>Middle Name : </h3>
                  <h6>{user?.middle_name} </h6>
                </div>
              )}

              <div className="shareholder_info">
                <h3>Citizenship Number : </h3>
                <h6>{user?.citizenship_number} </h6>
              </div>

              {user?.pan_number !== null && (
                <div className="shareholder_info">
                  <h3>PAN Number : </h3>
                  <h6>{user?.pan_number} </h6>
                </div>
              )}

              {user?.birth_date_bs !== null && (
                <div className="shareholder_info">
                  <h3>Birth Date (BS) :</h3>
                  <h6>{user?.birth_date_bs} </h6>
                </div>
              )}

              <div className="shareholder_info">
                <h3>Father Name:</h3>
                <h6>{user?.father_name_or_spouse_name} </h6>
              </div>

              <div className="shareholder_info">
                <h3>Phone Number:</h3>
                {user?.shareholder_phone ? (
                  <h6>{user?.shareholder_phone[0]?.number}</h6>
                ) : (
                  <h6>No phone number available</h6>
                )}
              </div>

              <div className="shareholder_info">
                <h3>Address: </h3>
                <h6>{getFilteredAddress()}</h6>
              </div>
            </div>
          </div>
        )}
        {edit && (
          <ShareholderEditForm
            user={user}
            userroles={userroles}
            setEdit={setEdit}
            apicall={apicall}
            edit={edit}
          />
        )}
      </div>
    </>
  );
};

export default DetailsForm;