import map from 'lodash/map'
import includes from 'lodash/includes'

import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'
import { useMatchPageStore } from 'features/MatchPage/store'
import { PlayerPlaylistOption } from 'features/MatchPage/types'
import { CloseButton } from 'features/PopupComponents'
import { Name, useName } from 'features/Name'

import {
  Checkbox,
  CloseButtonContainer,
  PartBlock,
  HeaderText,
  ItemBlock,
  ItemsContainer,
  ItemText,
  MainCheckboxContainer,
  PopupContainer,
  PopupInner,
  PopupHeader,
  Button,
  ButtonConatiner,
  PlayerNumber,
} from './styled'

type TLabelProps = {
  checked: boolean,
  player: PlayerPlaylistOption,
}

const Label = ({
  checked,
  player,
}: TLabelProps) => {
  const { num } = player
  return (
    <ItemText>
      <PlayerNumber checked={checked}>
        {num}
      </PlayerNumber>
      <Name nameObj={player} />
    </ItemText>
  )
}

export const FiltersPopup = () => {
  const {
    activeEvents,
    activeFirstTeamPlayers,
    activeSecondTeamPlayers,
    allActionsToggle,
    allPlayersToggle,
    applyFilters,
    closePopup,
    isAllActionsChecked,
    isFirstTeamPlayersChecked,
    isSecondTeamPlayersChecked,
    matchPlaylists,
    profile,
    toggleActiveEvents,
    toggleActivePlayers,
    uniqEvents,
  } = useMatchPageStore()

  const team1Name = useName(profile!.team1)
  const team2Name = useName(profile!.team2)

  return (
    <PopupContainer>
      <PopupInner>
        <CloseButtonContainer>
          <CloseButton
            size={isMobileDevice ? 8 : 16}
            onClick={closePopup}
          />
        </CloseButtonContainer>
        <PopupHeader>
          <HeaderText>
            <T9n t='filter' />
          </HeaderText>
        </PopupHeader>
        <PartBlock>
          <MainCheckboxContainer>
            <Checkbox
              isMainCheckbox
              onChange={allActionsToggle}
              checked={isAllActionsChecked}
              labelLexic='all_actions'
            />
          </MainCheckboxContainer>
          <ItemsContainer>
            {map(uniqEvents, ((event) => (
              <ItemBlock key={event}>
                <Checkbox
                  checked={includes(activeEvents, event)}
                  onChange={toggleActiveEvents(event)}
                  labelLexic={event}
                />
              </ItemBlock>
            )))}
          </ItemsContainer>
        </PartBlock>
        <PartBlock>
          <MainCheckboxContainer>
            <Checkbox
              isMainCheckbox
              checked={isFirstTeamPlayersChecked}
              label={team1Name}
              onChange={allPlayersToggle('team1')}
            />
          </MainCheckboxContainer>
          <ItemsContainer>
            {map(matchPlaylists.players.team1, ((player) => {
              const isCheckboxChecked = includes(activeFirstTeamPlayers, player.id)
              return (
                <ItemBlock key={player.id}>
                  <Checkbox
                    onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
                    checked={isCheckboxChecked}
                    label={(<Label checked={isCheckboxChecked} player={player} />)}
                  />
                </ItemBlock>
              )
            }))}
          </ItemsContainer>
        </PartBlock>
        <PartBlock>
          <MainCheckboxContainer>
            <Checkbox
              isMainCheckbox
              checked={isSecondTeamPlayersChecked}
              label={team2Name}
              onChange={allPlayersToggle('team2')}
            />
          </MainCheckboxContainer>
          <ItemsContainer>
            {map(matchPlaylists.players.team2, ((player) => {
              const isCheckboxChecked = includes(activeSecondTeamPlayers, player.id)
              return (
                <ItemBlock key={player.id}>
                  <Checkbox
                    onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
                    checked={isCheckboxChecked}
                    label={(<Label checked={isCheckboxChecked} player={player} />)}
                  />
                </ItemBlock>
              )
            }))}
          </ItemsContainer>
        </PartBlock>
      </PopupInner>
      <ButtonConatiner>
        <Button onClick={applyFilters}>
          <T9n t='apply_filter' />
        </Button>
      </ButtonConatiner>
    </PopupContainer>
  )
}
