import { useBasedTranslation } from '@based/i18n'
import { AppHeader, IconButton, Tabs, useTheme } from '@based/ui'
import { useRouter } from 'react-router5'
import type { TranslationsType } from '../i18n'
import { useTypedRoute } from '../router'
import { Title } from './title'

export const Navbar = () => {
  const t = useBasedTranslation<TranslationsType>()
  const { toggleTheme, theme } = useTheme()
  const { params } = useTypedRoute()
  const { section } = params
  const router = useRouter()
  const isDarkMode = theme === 'dark'
  const themeTooltip = isDarkMode
    ? t('navbar.buttons.theme.tooltip.light')
    : t('navbar.buttons.theme.tooltip.dark')

  const handleSection = (section: string) => {
    router.navigate('sections', {
      section,
    })
  }

  const goHome = () => router.navigate('home')

  const tabs = [
    {
      value: 'components',
      label: t('navbar.buttons.components'),
    },
    {
      value: 'colors',
      label: t('navbar.buttons.colors'),
    },
    {
      value: 'typography',
      label: t('navbar.buttons.typography'),
    },
  ]

  return (
    <AppHeader>
      <AppHeader.Title>
        <div onClick={goHome} onKeyDown={goHome}>
          <Title variant="title-bold-small">@{t('appName')}</Title>
        </div>
      </AppHeader.Title>
      <AppHeader.Left>
        <Tabs tabs={tabs} value={section} onChange={handleSection} />
      </AppHeader.Left>
      <AppHeader.Right>
        <IconButton
          onClick={toggleTheme}
          icon="boolean"
          tooltip={themeTooltip}
        />
      </AppHeader.Right>
    </AppHeader>
  )
}
