import { T9n } from 'features/T9n'
import { Wrapper } from 'features/PreferencesPopup/styled'

import { ItemInfo } from 'components/ItemInfo/ItemInfo'

import type { FavouriteTeams } from 'requests/getFavouriteTeam'

import { SportTypes } from 'config'

import { useFavouriteTeam } from './hooks'

import {
  Button,
  ButtonsBlock,
  ScBody,
  ScGroup,
  ScGroupName,
  ScGroups,
  ScHeaderTitle,
  ScModalContainer,
  ScTeamsList,
} from './styled'

export const FavouriteTeamPopup = () => {
  const {
    activeId,
    changeActive,
    group1,
    group2,
    isOpen,
    onSaveFavouriteTeam,
  } = useFavouriteTeam()

  return (
    <ScModalContainer isOpen={isOpen} withCloseButton={false}>
      <Wrapper>
        <ScBody>
          <ScHeaderTitle>
            <T9n t='choose_fav_team' />
          </ScHeaderTitle>
          <ScGroups>
            <ScGroup>
              <ScGroupName>
                <T9n t='group' /> 1
              </ScGroupName>
              <ScTeamsList>
                {group1?.map((team: FavouriteTeams) => (
                  <ItemInfo
                    active={team.id === activeId}
                    key={team.id}
                    id={team.id}
                    name={team.name_en}
                    sportId={SportTypes.FOOTBALL}
                    type={2}
                    onClick={() => changeActive(team)}
                  />
                ))}
              </ScTeamsList>
            </ScGroup>
            <ScGroup>
              <ScGroupName>
                <T9n t='group' /> 2
              </ScGroupName>
              <ScTeamsList>
                {group2?.map((team: FavouriteTeams) => (
                  <ItemInfo
                    active={team.id === activeId}
                    key={team.id}
                    id={team.id}
                    name={team.name_en}
                    sportId={SportTypes.FOOTBALL}
                    type={2}
                    onClick={() => changeActive(team)}
                  />
                ))}
              </ScTeamsList>
            </ScGroup>
          </ScGroups>
          <ButtonsBlock>
            <Button disabled={!activeId} onClick={onSaveFavouriteTeam}>
              Ok
            </Button>
          </ButtonsBlock>
        </ScBody>
      </Wrapper>
    </ScModalContainer>
  )
}
