import {Fragment} from 'react';
import {PlayerContext} from '@common/player/player-context';
import {MediaItem} from '@common/player/media-item';
import {PlayerOutlet} from '@common/player/ui/player-outlet';
import {PlayButton} from '@common/player/ui/controls/play-button';
import {VolumeControls} from '@common/player/ui/controls/volume-controls';
import {Seekbar} from '@common/player/ui/controls/seeking/seekbar';
import {FormattedCurrentTime} from '@common/player/ui/controls/formatted-current-time';
import {FormattedPlayerDuration} from '@common/player/ui/controls/formatted-player-duration';
import {PlaybackOptionsButton} from '@common/player/ui/controls/playback-options-button';
import clsx from 'clsx';
import {SeekButton} from '@common/player/ui/controls/seeking/seek-button';
import {Forward10Icon} from '@common/icons/material/Forward10';
import {UndoIcon} from '@common/icons/material/Undo';

const mediaItem: MediaItem = {
  id: 'test1',
  src: 'storage/title-videos/pLiHKnN3dXz0Ep0rVrgiZ4mSS0lyDV8fnrcwmDOE.mp4',
  poster: 'https://peach.blender.org/wp-content/uploads/bbb-splash.png',
  provider: 'htmlAudio',
};

const mediaItem2: MediaItem = {
  id: 'test2',
  src: '0G3_kG5FFfQ',
  provider: 'youtube',
};

interface Props {
  className?: string;
}
export function AudioPlayer({className}: Props) {
  return (
    <PlayerContext
      id="audio"
      options={{
        initialData: {
          queue: [mediaItem2, mediaItem],
          cuedMediaId: 'test1',
        },
      }}
    >
      <div className={clsx(className, 'shadow rounded')}>
        <Player />
      </div>
    </PlayerContext>
  );
}

function Player() {
  return (
    <Fragment>
      <PlayerOutlet className="w-full h-full" />
      <Controls />
    </Fragment>
  );
}

function Controls() {
  return (
    <div className="flex items-center gap-24 p-14 text-sm">
      <div className="flex items-center gap-4">
        <SeekButton seconds="-15">
          <UndoIcon />
        </SeekButton>
        <PlayButton />
        <SeekButton seconds="+15">
          <Forward10Icon />
        </SeekButton>
      </div>
      <FormattedCurrentTime className="min-w-40 text-right" />
      <Seekbar fillColor="bg-black" trackColor="bg-black/20" />
      <FormattedPlayerDuration className="min-w-40 text-right" />
      <div className="flex items-center gap-4">
        <PlaybackOptionsButton />
        <VolumeControls fillColor="bg-black" trackColor="bg-black/20" />
      </div>
    </div>
  );
}