import { Link, useRouteMatch } from 'react-router-dom'

import { isMobileDevice } from 'config/userAgent'
import { client } from 'config/clients'
import { PAGES } from 'config/pages'

import { usePreferencesStore } from 'features/PreferencesPopup'
import { useTournamentPopupStore } from 'features/TournamentsPopup/store'
import { useAuthStore } from 'features/AuthStore'

import { FavoritesMobilePopup } from '../FavoritesMobilePopup'

import {
  MenuList,
  MenuItem,
  Icon,
} from './styled'

export const Menu = () => {
  const { openPopup } = usePreferencesStore()
  const { open } = useTournamentPopupStore()
  const isHomePage = useRouteMatch(PAGES.home)?.isExact
  const { logout, user } = useAuthStore()

  return (
    <MenuList>
      {isMobileDevice && <FavoritesMobilePopup />}
      {
        isHomePage && !client.disabledPreferences && (
          <MenuItem onClick={client.name === 'facr' ? open : openPopup}>
            <Icon src='header-settings' size='1.4rem' />
          </MenuItem>
        )
      }
      <MenuItem onClick={(e) => {
        e.preventDefault()
        !user && logout('saveToken')
      }}
      >
        <Link
          to={`${PAGES.useraccount}/personal-info`}
        >
          <Icon src='userAccount' size='0.95rem' />
        </Link>
      </MenuItem>
    </MenuList>
  )
}
