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

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

type Props = {
  marginTop?: number,
  onFormatSelect: (format: PlayerPlaylistFormats) => void,
  selectedFormat: PlayerPlaylistFormats,
}

export const PlaylistFormats = ({
  marginTop,
  onFormatSelect,
  selectedFormat,
}: Props) => (
  <Wrapper marginTop={marginTop}>
    <BlockTitle>
      <T9n t='playlist_format' />
    </BlockTitle>
    <List>
      <Item>
        <Radio
          name='playlist_formats'
          labelLexic='playlist_format_all_match_time'
          checked={selectedFormat === PlayerPlaylistFormats.ALL_MATCH_TIME}
          onChange={() => onFormatSelect(PlayerPlaylistFormats.ALL_MATCH_TIME)}
        />
      </Item>
      <Item>
        <Radio
          name='playlist_formats'
          labelLexic='playlist_format_all_actions'
          checked={selectedFormat === PlayerPlaylistFormats.ALL_ACTIONS}
          onChange={() => onFormatSelect(PlayerPlaylistFormats.ALL_ACTIONS)}
        />
      </Item>
      <Item>
        <Radio
          name='playlist_formats'
          labelLexic='playlist_format_selected_acions'
          checked={selectedFormat === PlayerPlaylistFormats.SELECTED_ACTIONS}
          onChange={() => onFormatSelect(PlayerPlaylistFormats.SELECTED_ACTIONS)}
        />
      </Item>
    </List>
  </Wrapper>
)
