import React, { useEffect, useMemo, useState } from "react";
import "../Profile/profile.css";
import ChangePassword from "./ChangePassword/ChangePassword";
import { Tabs } from "antd";
import TransactionHistory from "./TransactionHistory/TransactionHistory";
import PaymentHistory from "./PaymentHistory/PaymentHistory";
import { useGetShareHolder } from "../../../apis/ShareHolders";
const tabs = [
  {
    label: "Payment History",
    key: "PH",
  },
  {
    label: "Transaction History",
    key: "TH",
  },
];
/**
 * Represents the Profile page component
 * @module Profile
 * @param user {Object} User object
 * @returns {JSX.Element} Profile component
 */
const Profile = ({ user }) => {
  /**
   * React state that stores the change password state
   * @name changePassword
   * @type {Boolean}
   * @default useState(false)
   * @memberof module:Profile
   */
  const [changePassword, setChangePassword] = useState(false);
  /**
   * React query hook that fetches the shareholder data
   * @name useGetShareHolder
   * @type {Function}
   * @memberof module:Profile
   */
  const { data: shareholderData, isLoading } = useGetShareHolder();
  /**
   * React state that stores the tab value
   * @name tabValue
   * @type {String}
   * @default useState(tabs[0].key)
   * @memberof module:Profile
   */
  const [tabValue, setTabValue] = useState(tabs[0].key);
  /**
   * React hook that memoizes the shareholder data
   * @name shareholder
   * @memberof module:Profile
   * @type {*|{}}
   */
  const shareholder = useMemo(() => {
    let temp = shareholderData?.data?.data?.results[0] || {};

    return temp;
  }, [shareholderData?.data]);

  /**
   * Function that handles tab change
   * @name handleChangeTab
   * @function handleChangeTab
   * @param value {String} Tab value
   */
  const handleChangeTab = (value) => {
    setTabValue(value);
  };
  // Getting tabs layout content
  /**
   * Function that returns the tab layout
   * @name getTabLayout
   * @function getTabLayout
   * @returns {JSX.Element}
   */
  const getTabLayout = () => {
    switch (tabValue) {
      case tabs[1].key:
        return <TransactionHistory />;
      default:
        return <PaymentHistory />;
    }
  };

  if (isLoading) {
    return;
  }
  return (
    <div className="shareholder_container">
      <div className="shareholder_heading">
        <div className="shareholder_heading_row1"></div>
        <div className="shareholder_heading_row3">
          <img src={shareholder?.photo} alt="" className="img_profile" />
          <div className="shareholder_text_div profile_info">
            <h3>{user.first_name + " " + user.last_name || ""}</h3>
            <p>{user.username || ""}</p>
            <small>{user.email || ""}</small>
          </div>
        </div>
      </div>
      <div className="profile_body">
        <div className="password_change_div">
          <div className="password_change_div_heading">
            {/* <p></p> */}
            <h3>Change Password</h3>
            {changePassword ? (
              <ion-icon
                name="chevron-up-outline"
                onClick={() => setChangePassword(!changePassword)}
                style={{
                  padding: ".2rem",
                  background: "#09aa4e",
                  color: "#ffffff",
                  borderRadius: "2rem",
                }}
              ></ion-icon>
            ) : (
              <ion-icon
                name="chevron-down-outline"
                onClick={() => setChangePassword(!changePassword)}
              ></ion-icon>
            )}
          </div>
          <div className="changepassword_form mt-3">
            {changePassword && <ChangePassword />}
          </div>
        </div>
        <div>
          <Tabs
            defaultActiveKey="1"
            onChange={handleChangeTab}
            size="large"
            items={tabs}
          />
          <div className="history_wrapper">{getTabLayout()}</div>
        </div>
      </div>
    </div>
  );
};

export default Profile;