import {
  NavLink,
  useLocation
} from "react-router-dom";


const menus = [
  {name: "Dashboard", path: "/"},
  {name: "Prediksi Satu Ulasan", path: "/prediksi"},
  {name: "Analisis CSV", path: "/analisis-csv"},
  {name: "Riwayat Analisis", path: "/riwayat"},
  {name: "Training & Riwayat Model", path: "/riwayat-model"},
  {name: "Penelitian & Model Awal", path: "/penelitian-model"}
];


function Sidebar() {
  const location =
    useLocation();


  /* ==========================================================
     MENENTUKAN MENU AKTIF
     ========================================================== */

  const isMenuActive =
    (menuPath) => {
      const pathname =
        location.pathname;


      if (menuPath === "/") {
        return pathname === "/";
      }


      /*
        Halaman detail hasil analisis merupakan
        bagian dari Riwayat Analisis.
      */

      if (
        menuPath === "/riwayat"
      ) {
        return (
          pathname ===
            "/riwayat" ||
          pathname.startsWith(
            "/hasil-analisis/"
          )
        );
      }


      return (
        pathname === menuPath
      );
    };


  /* ==========================================================
     TAMPILAN
     ========================================================== */

  return (
    <aside className="sidebar">

      {/* ======================================================
          BRAND
          ====================================================== */}

      <div className="sidebar-brand">

        <div className="brand-logo">
          S
        </div>

        <div>
          <h2>
            S-Learn
          </h2>

          <p>
            Analisis Sentimen
          </p>
        </div>

      </div>


      {/* ======================================================
          NAVIGASI
          ====================================================== */}

      <nav className="sidebar-menu">

        {menus.map(
          (menu) => {
            const aktif =
              isMenuActive(
                menu.path
              );

            return (
              <NavLink
                key={
                  menu.path
                }
                to={
                  menu.path
                }
                end={
                  menu.path === "/"
                }
                aria-current={
                  aktif
                    ? "page"
                    : undefined
                }
                className={
                  `sidebar-link ${
                    aktif
                      ? "active"
                      : ""
                  }`
                }
              >
                {menu.name}
              </NavLink>
            );
          }
        )}

      </nav>

    </aside>
  );
}


export default Sidebar;