import { NowPlaying } from './NowPlaying'
import { QueuePopover } from './queue-popover'
import type { QueueItem } from './QueueList'

type PlayerBarProps = {
  track: QueueItem | null
  queue: QueueItem[]
  order: number[]
  playingOrigIdx: number
  scrollSignal: number
  onQueuePlay: (origIdx: number) => void
  onQueueRemove: (origIdx: number) => void
  onQueueMove: (fromPos: number, toPos: number) => void
}

export function PlayerBar({
  track,
  queue,
  order,
  playingOrigIdx,
  scrollSignal,
  onQueuePlay,
  onQueueRemove,
  onQueueMove,
}: PlayerBarProps) {
  return (
    <div className="player-bar">
      <NowPlaying track={track} />
      <div className="controls">
        <div className="ctrl-btns">
          <button className="ctrl-btn" id="btnPrev">
            &#9198;
          </button>
          <button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
            &#9654;
          </button>
          <button className="ctrl-btn" id="btnNext">
            &#9197;
          </button>
        </div>
        <div className="progress-row">
          <span className="time" id="timeElapsed">
            0:00
          </span>
          <div className="progress-bar" id="progressBar">
            <div className="progress-fill" id="progressFill" style={{ width: '0%' }} />
          </div>
          <span className="time" id="timeDuration">
            0:00
          </span>
        </div>
      </div>
      <div className="volume-row">
        <QueuePopover
          queue={queue}
          order={order}
          playingOrigIdx={playingOrigIdx}
          scrollSignal={scrollSignal}
          onPlay={onQueuePlay}
          onRemove={onQueueRemove}
          onMove={onQueueMove}
        />
        <span className="vol-icon" id="volIcon">
          &#128266;
        </span>
        <input
          type="range"
          className="volume-slider"
          id="volSlider"
          min={0}
          max={100}
          defaultValue={80}
        />
      </div>
    </div>
  )
}