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

import type { Actions } from 'requests'

import { T9n } from 'features/T9n'
import { BlockTitle } from 'features/MatchPopup/styled'

import type { SelectedActions } from '../../types'
import {
  Wrapper,
  Checkbox,
  List,
  Item,
} from './styled'

type Props = {
  actions: Actions,
  onActionClick: (actions: SelectedActions) => void,
  selectedActions: SelectedActions,
}

export const PlayerActions = ({
  actions,
  onActionClick,
  selectedActions,
}: Props) => {
  const handleActionClick = (id: number) => {
    const newSelectedActions = includes(selectedActions, id)
      ? filter(selectedActions, (actionId) => actionId !== id)
      : [...selectedActions, id]

    onActionClick(newSelectedActions)
  }
  return (
    <Wrapper>
      <BlockTitle>
        <T9n t='selected_player_actions' />
      </BlockTitle>
      <List>
        {
          map(actions, (action) => (
            <Item key={action.id}>
              <Checkbox
                checked={includes(selectedActions, action.id)}
                onChange={() => handleActionClick(action.id)}
                labelLexic={action.lexic}
              />
            </Item>
          ))
        }
      </List>
    </Wrapper>
  )
}
