import type { ReactElement } from 'react'

import styled from 'styled-components/macro'

import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
import {
  Controls,
  Fullscreen,
  PlayStop,
} from 'features/StreamPlayer/styled'

import { ProgressBar } from '.'

const Story = {
  component: ProgressBar,
  title: 'ProgressBarWithChapters',
}

export default Story

const Wrapper = styled.div`
  position: relative;
  width: 95vw;
  height: 50vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
`

const callback = () => {}

const renderInControls = (progressBarElement: ReactElement) => (
  <Wrapper>
    <Controls visible>
      <PlayStop onClick={callback} playing={false} />
      <VolumeBar
        value={50}
        muted={false}
        onChange={callback}
        onClick={callback}
      />
      {progressBarElement}
      <Fullscreen onClick={callback} isFullscreen={false} />
    </Controls>
  </Wrapper>
)

const duration = 70000

const chapters = [
  {
    duration: 30000,
    endMs: 30000,
    endOffsetMs: 0,
    period: 0,
    startMs: 0,
    startOffsetMs: 0,
    url: '',
  },
  {
    duration: 30000,
    endMs: 60000,
    endOffsetMs: 0,
    period: 0,
    startMs: 30000,
    startOffsetMs: 0,
    url: '',
  },
  {
    duration: 10000,
    endMs: 70000,
    endOffsetMs: 0,
    period: 0,
    startMs: 60000,
    startOffsetMs: 0,
    url: '',
  },
]

export const Empty = () => renderInControls(
  <ProgressBar
    activeChapterIndex={0}
    allPlayedProgress={0}
    duration={duration}
    chapters={chapters}
    onPlayedProgressChange={callback}
    playedProgress={0}
    loadedProgress={0}
  />,
)

export const HalfLoaded = () => renderInControls(
  <ProgressBar
    activeChapterIndex={0}
    allPlayedProgress={0}
    duration={duration}
    chapters={chapters}
    onPlayedProgressChange={callback}
    playedProgress={0}
    loadedProgress={30000}
  />,
)

export const HalfPlayed = () => renderInControls(
  <ProgressBar
    activeChapterIndex={1}
    allPlayedProgress={1}
    duration={duration}
    chapters={chapters}
    onPlayedProgressChange={callback}
    playedProgress={30000}
    loadedProgress={0}
  />,
)

export const Loaded40AndPlayed20 = () => renderInControls(
  <ProgressBar
    activeChapterIndex={0}
    allPlayedProgress={0}
    duration={duration}
    chapters={chapters}
    onPlayedProgressChange={callback}
    playedProgress={20000}
    loadedProgress={40000}
  />,
)