import React, { useEffect, useState } from "react";
import "../SideNavBar/sidenavbar.css";
import { NavLink } from "react-router-dom";
import SideNavbarArrayList from "../../../array/SideNavbarArray/SidenavbarArrayList";
/**
 * A sidebar navigation component.
 * @param {object} props - The component's props.
 * @param {object} props.userroles - User role information.
 * @param {boolean} props.mobileMenu - Whether the mobile menu is open.
 * @param {function} props.setMobileMenu - Function to set the mobile menu state.
 * @returns {JSX.Element} The rendered component.
 */
const SideNavbar = ({ userroles, setMobileMenu, mobileMenu }) => {
  const [sideNavbarArray, setSideNavbarArray] = useState([]);

  useEffect(() => {
    filterList();
  }, [userroles?.is_eligible]);

  const filterList = () => {
    const filteredSidebarLinks = SideNavbarArrayList.filter((link) => {
      if (link.text === "Share Contract" && !userroles.is_eligible) {
        return false; // Exclude "Share Contract" link if user is not eligible
      }
      if (link.text === "Share Contract") {
      }
      if (
        (link.text === "Transfer ReQ" ||
          link.text === "Bonus" ||
          link.text === "Share History") &&
        !userroles.is_shareholder
      ) {
        return false; // Exclude "Transfer ReQ", "Bonus", and "Share History" links if user is not a shareholder
      }
      return true; // Include all other links
    });

    setSideNavbarArray(filteredSidebarLinks);
  };
  return (
    <div className="sidenavbar_container">
      <div className="company_logo">
        <NavLink to="/dashboard">
          <img src="/psmsLogo.png" alt="Company Logo" />
        </NavLink>
        <div className="close_icon" onClick={() => setMobileMenu(!mobileMenu)}>
          <ion-icon name="close-outline"></ion-icon>
        </div>
      </div>
      <div className="sidenavbar_div">
        {sideNavbarArray.map((dat, i) => {
          return (
            <NavLink
              onClick={() => setMobileMenu(false)}
              to={dat.navigat_to}
              key={i}
              end={dat.text == "Dashboard"}
              className="nav_item"
              style={({ isActive }) => ({
                color: isActive ? "#ffffff" : "#2C2D45",
                background: isActive ? "#53BF8A" : null,
                padding: ".7rem 2rem",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                transition: "all 0.3s",
              })}
            >
              <div className="left">
                <ion-icon
                  name={dat.left_icon}
                  style={{ marginRight: "1rem" }}
                ></ion-icon>
                <p style={{ fontSize: "14px" }}>{dat.text}</p>
              </div>
              <div className="right">
                <ion-icon
                  name={dat.right_icon}
                  className="right_arrow"
                  style={{
                    fontSize: "12px",
                  }}
                ></ion-icon>
              </div>
            </NavLink>
          );
        })}
      </div>
    </div>
  );
};

export default SideNavbar;