import { useRouter } from 'next/router';
import {
  IconBox,
  IconBriefcase,
  IconCheck,
  IconLogout,
  IconShoppingBag,
} from '@tabler/icons-react';
import { NavbarLink, NavbarLinkKey } from '@/components/Layout/Navbar/types';
import classes from './Navbar.module.css';

const data: NavbarLink[] = [
  { href: '/products', key: 'products', label: 'Товары', icon: IconBox },
  { href: '/marketplaces', key: 'marketplaces', label: 'Маркетплейсы', icon: IconShoppingBag },
  { href: '/legal-entities', key: 'legal-entities', label: 'Юр. лица', icon: IconBriefcase },
  { href: '/deal-requests', key: 'deal-requests', label: 'Заявки на сделку', icon: IconCheck },
];
const hrefToKeyMap: Record<string, NavbarLinkKey> = data.reduce(
  (acc, item) => ({ ...acc, [`${item.href}`]: `${item.key}` }),
  { '/': 'index' }
);
export function Navbar() {
  const router = useRouter();
  const currentPath = router.pathname;
  const active = hrefToKeyMap[currentPath];
  const links = data.map((item) => {
    return (
      <a
        className={classes.link}
        data-active={item.key === active || undefined}
        href={item.href}
        key={item.label}
        onClick={async (event) => {
          event.preventDefault();
          await router.push(item.href);
        }}
      >
        <item.icon className={classes.linkIcon} stroke={1.5} />
        <span>{item.label}</span>
      </a>
    );
  });

  return (
    <nav className={classes.navbar}>
      <div className={classes.navbarMain}>{links}</div>

      <div className={classes.footer}>
        <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
          <IconLogout className={classes.linkIcon} stroke={1.5} />
          <span>Выйти</span>
        </a>
      </div>
    </nav>
  );
}

export default Navbar;