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

import { usePreferencesStore } from 'features/PreferencesPopup/store'
import { T9n } from 'features/T9n'

import { BlockTitle } from '../../styled'
import {
  Wrapper,
  List,
  Item,
  Checkbox,
} from './styled'

export const SportsList = () => {
  const {
    onSportSelect,
    selectedSports,
    sports,
  } = usePreferencesStore()
  return (
    <Wrapper>
      <BlockTitle>
        <T9n t='sport_types' />
      </BlockTitle>
      <List>
        {map(sports, (sport) => (
          <Item key={sport.id}>
            <Checkbox
              checked={includes(selectedSports, sport.id)}
              labelLexic={sport.lexic}
              onChange={() => onSportSelect(sport.id)}
            />
          </Item>
        ))}
      </List>
    </Wrapper>
  )
}
