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>
)