import map from 'lodash/map'

import type { Chapter } from '../../types'
import {
  ChapterList,
  ChapterContainer,
  LoadedProgress,
  PlayedProgress,
} from './styled'

type ChapterWithStyles = Chapter & {
  loaded: number,
  played: number,
  width: number,
}

type Props = {
  chapters: Array<ChapterWithStyles>,
}

export const Chapters = ({ chapters }: Props) => (
  <ChapterList>
    {map(chapters, ({
      loaded,
      played,
      width,
    }, index) => (
      <ChapterContainer key={index} style={{ width: `${width}%` }}>
        <LoadedProgress style={{ width: `${loaded}%` }} />
        <PlayedProgress
          style={{ width: `${played}%` }}
        />
      </ChapterContainer>
    ))}
  </ChapterList>
)
