import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import { Select } from '@shared/ui'
import { ProfileSummary } from './ProfileSummary'
import styles from './ProfileMenu.module.css'

const ITEMS = [
  { to: ROUTES.PROFILE_DETAILS, label: 'Данные профиля' },
  { to: ROUTES.PROFILE_SECURITY, label: 'Безопасность' },
  { to: ROUTES.PROFILE_TRANSACTIONS, label: 'Транзакции' },
  { to: ROUTES.PROFILE_MNEMONIC, label: 'Мнемоническая фраза' },
]

const SELECT_OPTIONS = ITEMS.map(({ to, label }) => ({ value: to, label }))

// Left column of the profile dashboard: pinned profile summary on top, then
// the section navigation. On desktop the navigation is a vertical list; on
// mobile it collapses into a <select> so only the chosen section is shown.
export function ProfileMenu() {
  const navigate = useNavigate()
  const { pathname } = useLocation()
  const current = ITEMS.find((i) => pathname.startsWith(i.to))?.to ?? ITEMS[0].to

  return (
    <aside className={styles.menu}>
      <div className={styles.summary}>
        <ProfileSummary />
      </div>

      <div className={styles.select}>
        <Select
          value={current}
          options={SELECT_OPTIONS}
          onChange={(value) => navigate(value)}
          label="Раздел профиля"
        />
      </div>

      <nav className={styles.nav}>
        {ITEMS.map(({ to, label }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              isActive ? `${styles.item} ${styles.itemActive}` : styles.item
            }
          >
            {label}
          </NavLink>
        ))}
      </nav>
    </aside>
  )
}
