import uniq from 'lodash/uniq'
import map from 'lodash/map'
import isEmpty from 'lodash/isEmpty'
import includes from 'lodash/includes'
import filter from 'lodash/filter'

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 = {
  player: PlayerPlaylistOption,
}

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

export const FiltersPopup = () => {
  const {
    activeEvents,
    activeFirstTeamPlayers,
    activeSecondTeamPlayers,
    applyFilters,
    closePopup,
    events,
    matchPlaylists,
    profile,
    resetEvents,
    resetPlayers,
    toggleActiveEvents,
    toggleActivePlayers,
  } = useMatchPageStore()
  const currentEvents = filter(events, (event) => event.pl !== undefined
    && event.t !== undefined)

  const uniqEvents = uniq(map(currentEvents, ({ l }) => l))

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

  return (
    <PopupContainer>
      <PopupInner>
        <CloseButtonContainer>
          <CloseButton onClick={closePopup} />
        </CloseButtonContainer>
        <PopupHeader>
          <HeaderText>
            <T9n t='filter' />
          </HeaderText>
        </PopupHeader>
        <PartBlock>
          <MainCheckboxContainer>
            <Checkbox
              onChange={resetEvents}
              checked={isEmpty(activeEvents)}
              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
              checked={isEmpty(activeFirstTeamPlayers)}
              label={team1Name}
              onChange={resetPlayers('team1')}
            />
          </MainCheckboxContainer>
          <ItemsContainer>
            {map(matchPlaylists.players.team1, ((player) => (
              <ItemBlock key={player.id}>
                <Checkbox
                  onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
                  checked={includes(activeFirstTeamPlayers, player.id)}
                  label={(<Label player={player} />)}
                />
              </ItemBlock>
            )))}
          </ItemsContainer>
        </PartBlock>
        <PartBlock>
          <MainCheckboxContainer>
            <Checkbox
              checked={isEmpty(activeSecondTeamPlayers)}
              label={team2Name}
              onChange={resetPlayers('team2')}
            />
          </MainCheckboxContainer>
          <ItemsContainer>
            {map(matchPlaylists.players.team2, ((player) => (
              <ItemBlock key={player.id}>
                <Checkbox
                  onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
                  checked={includes(activeSecondTeamPlayers, player.id)}
                  label={(<Label player={player} />)}
                />
              </ItemBlock>
            )))}
          </ItemsContainer>
        </PartBlock>
      </PopupInner>
      <ButtonConatiner>
        <Button onClick={applyFilters}>
          <T9n t='apply_filter' />
        </Button>
      </ButtonConatiner>
    </PopupContainer>
  )
}
