import React from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { routesData } from '~/driven/utils/configs/appConfig';
import { icons } from '~/driven/utils/constants/assertUrls';
import { useUser } from '~/driven/utils/helpers/contexts/userContext';
import { navigateToAuth } from '~/driven/utils/helpers/globalHelpers';

export default function Sidebar() {
  const isCurrentPage = useLocation();
  const userCTX = useUser();
  const navigator = useNavigate();
  const pages = Object.keys(routesData).map((routeKey) => {
    const key = routeKey as keyof typeof routesData;
    return (
      <Link
        key={key}
        to={routesData[key].path}
        className={`flex text-white mb-6 text-sm w-full  py-2 pl-2 rounded-lg ${
          isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''
        }`}
      >
        <img src={routesData[key].icon} alt='page icon' className='mr-2' />
        <div>{routesData[key].title}</div>
      </Link>
    );
  });

  return (
    <aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'>
      <div className='logo'>
        <img src={icons.logo} alt='logo icon' />
      </div>
      <div className='mt-14 flex flex-col items-baseline'>
        {pages}
        <div className='mt-auto text-white px-3 absolute bottom-5'>
          <button onClick={() => navigateToAuth(userCTX, navigator)}>Log out</button>
        </div>
      </div>
    </aside>
  );
}