import * as React from 'react';
import styles from './SideNav.module.scss';
import { Icon } from '../../shared/ui/Icon/Icon';
import { IconName } from '../../shared/ui/Icon/iconNames';
import { NavSection } from '../../shared/routing';

interface INavItem {
  id: NavSection;
  title: string;
  icon: IconName;
}

const ITEMS: INavItem[] = [
  { id: 'new', title: 'Новая заявка', icon: 'plus' },
  { id: 'approvals', title: 'На согласовании', icon: 'user-check' },
  { id: 'own', title: 'Мои заявки', icon: 'clipboard' },
];

interface ISideNavProps {
  activeId: NavSection;
  onChange: (id: NavSection) => void;
  /** Счётчик у пункта «На согласовании» (сколько ждут решения). */
  approvalsCount?: number;
  collapsed: boolean;
  onToggleCollapsed: () => void;
}

// Тёмное боковое меню портала: переключает разделы (подача заявки / таблицы
// заявок). Сворачивается до узкой полосы с одними иконками.
export const SideNav: React.FC<ISideNavProps> = ({
  activeId,
  onChange,
  approvalsCount,
  collapsed,
  onToggleCollapsed,
}) => {
  const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');

  return (
    <nav className={navClasses} aria-label="Разделы портала">
      <button
        type="button"
        className={styles.toggle}
        onClick={onToggleCollapsed}
        aria-label={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
        title={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
      >
        <Icon name={collapsed ? 'chevron-right' : 'chevron-left'} size="sm" />
      </button>

      {ITEMS.map((item) => {
        const isActive = item.id === activeId;
        const itemClasses = [styles.item, isActive ? styles.itemActive : ''].filter(Boolean).join(' ');
        const showCount = item.id === 'approvals' && !!approvalsCount;

        return (
          <button
            key={item.id}
            type="button"
            className={itemClasses}
            aria-current={isActive ? 'page' : undefined}
            onClick={() => onChange(item.id)}
            title={collapsed ? item.title : undefined}
          >
            <span className={styles.itemIcon}>
              <Icon name={item.icon} size="sm" />
            </span>
            {!collapsed && <span className={styles.itemTitle}>{item.title}</span>}
            {showCount && <span className={styles.badge}>{approvalsCount}</span>}
          </button>
        );
      })}
    </nav>
  );
};