import React, { useMemo } from "react";
import { NavLink } from "react-router-dom";
import { useGetShareList } from "../../../apis/Shares";
import EmptyData from "../../../component/EmptyData/EmptyData";

/**
 * Represents  RecentshareopeningsList component
 * @module RecentshareopeningsList
 * @param userroles {object} - user role
 * @param sortBy {string} - sort by
 * @param searchInput {string} - search input
 */
const RecentshareopeningsList = ({ userroles, sortBy, searchInput }) => {
  /**
   * React query for getting share list
   * @name useGetShareList
   * @memberof module:RecentshareopeningsList
   *
   */
  const { data: share, isLoading: shareLoading } = useGetShareList();
  /**
   * React useMemo for getting share list
   * @name getShareList
   * @memberof module:RecentshareopeningsList
   * @type {Array.<object>}
   */
  const getShareList = useMemo(() => {
    const temp = share?.data?.data?.results || [];
    if (searchInput) {
      const filteredList = temp.filter((contract) =>
        contract.name.toLowerCase().includes(searchInput.toLowerCase())
      );
      return filteredList.reverse();
    }
    switch (sortBy) {
      case "AZ":
        return [...temp].sort((a, b) => a.name.localeCompare(b.name));
      case "ZA":
        return [...temp].sort((a, b) => a.name.localeCompare(b.name)).reverse();
      case "OLD":
        return [...temp].reverse();
      case "RECENT":
        return temp;
    }
    return temp;
  }, [share?.data, searchInput, sortBy]);
  if (shareLoading) {
    return;
  }
  if (!getShareList?.length) {
    return <EmptyData />;
  }
  return (
    <>
      <div className="company_list_table">
        <table className="table-auto company_list">
          <thead>
            <tr>
              <th>
                <h3 className="font-[600]">Company</h3>
              </th>
              <th>
                <h3 className="font-[600]">Type</h3>
              </th>
              <th>
                <h3 className="font-[600]">Minimum Kitta</h3>
              </th>
              <th>
                <h3 className="font-[600]">Price</h3>
              </th>
              <th>Action</th>
            </tr>
          </thead>
          {getShareList.map((dat, i) => {
            return (
              <tbody key={i}>
                <tr>
                  <td>{dat?.name || ""}</td>
                  <td>{dat?.share_type || ""}</td>
                  <td>{dat?.minimum_kitta || ""}</td>
                  <td>{dat?.price || ""}</td>
                  <td>
                    <NavLink
                      to={
                        userroles?.is_eligible == true
                          ? `/dashboard/applyshare/${dat?.id}`
                          : `/dashboard/shareholderdetails/`
                      }
                      className="apply_share_btn"
                    >
                      Apply Share
                    </NavLink>
                  </td>
                </tr>
              </tbody>
            );
          })}
        </table>
      </div>
    </>
  );
};

export default RecentshareopeningsList;