import map from 'lodash/map'
import size from 'lodash/size'

import styled from 'styled-components/macro'

import type { InterviewPlaylistOptions, PlaylistOption } from 'features/MatchPage/types'

import { isEqual } from 'features/MatchSidePlaylists/helpers'
import { Name } from 'features/Name'

import { InterviewPlayButton } from '../InterviewButton'

type Props = {
  interviews: InterviewPlaylistOptions,
  onSelect: (selectedMathPlaylist: PlaylistOption) => void,
  selectedMathPlaylist?: PlaylistOption,
}

const List = styled.ul``

const InterviewItem = styled.li`
  min-height: 50px;
  margin-bottom: 10px;
  width: 100%;
`

export const SideInterviews = (props: Props) => {
  const {
    interviews,
    onSelect,
    selectedMathPlaylist,
  } = props
  return (
    <List>
      {
        map(interviews, (interview) => {
          const overLength = (size(interview.name_eng) > 16 || size(interview.name_rus) > 16)
          return (
            <InterviewItem key={interview.id}>
              <InterviewPlayButton
                active={isEqual(interview, selectedMathPlaylist)}
                onClick={() => onSelect(interview)}
                overlength={overLength}
              >
                <Name nameObj={interview} />
              </InterviewPlayButton>
            </InterviewItem>
          )
        })
      }
    </List>
  )
}
