import { T9n } from 'features/T9n'
import type { SportsType } from 'features/SportsFilter'

import { isMobileDevice } from 'config/userAgent'

import { getSportLexic } from 'helpers/getSportLexic'

import {
  ScBody,
  ScModal,
  ScHeaderTitle,
  ScHeaderGroup,
  ScSport,
  ScSportName,
} from './styled'

type Props = {
  isOpen: boolean,
  onModalClose: () => void,
  onSportClick: (sport: string) => void,
  selectedSport: Array<string>,
  sportIds: Array<number>,
  sports: SportsType,
}
export const SelectSportPopup = ({
  isOpen,
  onModalClose,
  onSportClick,
  selectedSport,
  sportIds,
  sports,
}: Props) => {
  const sportNames = sportIds?.map((id) => String(getSportLexic(Number(id))))
  sportNames?.unshift('all_sports')

  return (
    <>
      <ScModal
        isOpen={isOpen}
        withCloseButton={isMobileDevice}
        close={onModalClose}
        closeSize={9}
      >
        <ScHeaderGroup>
          <ScHeaderTitle>
            <T9n t='choose_sport' />
          </ScHeaderTitle>
        </ScHeaderGroup>
        <ScBody>
          {sportNames?.map((sport: string) => (
            <ScSport
              key={sport}
              onClick={() => onSportClick(sport)}
              className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''}
              active={selectedSport.indexOf(sport) >= 0}
            >
              <ScSportName>
                <T9n t={sports[sport as keyof typeof sports]} />
              </ScSportName>
            </ScSport>
          ))}
        </ScBody>
      </ScModal>
    </>
  )
}
