import React, { useContext, useCallback } from 'react';
import { PlaylistContextInterface } from '../../../../contexts/PlaylistContext/PlaylistContext';
import IconButton from '../../../../elements/IconButton/IconButton';

const CurrentPlaylistTopBar = (props: { context: React.Context<PlaylistContextInterface>, active: number, pause: () => void, resume: () => void, next: () => void, prev: () => void, stop: (stopVideos?: boolean) => Promise<void>, isAuto: boolean }): JSX.Element => {
  const { /* pause, */ resume, next, prev, stop, active } = props;
  const { playlist } = useContext(props.context);

  const isPauseButtonDisabled = useCallback(() => {
    // if (playlist.length <= 0 || active == -1 || busy)
    //   return true;
    return false;
  }, [])

  return (
    <div>
      <IconButton icon="play" bgColor="main" onClick={() => resume()} customStyle={{marginRight:10}} title="Play" />
      { /* <IconButton icon="pause" bgColor="main" onClick={() => pause()} disabled={isPauseButtonDisabled()} customStyle={{marginRight:10}} title="Pause" /> */ }
      <IconButton icon="stop" bgColor="main" onClick={async() => await stop(true)} customStyle={{marginRight:10}} title="Stop" />
      <IconButton icon="chevron-down" bgColor="main" onClick={() => next()} disabled={isPauseButtonDisabled()} customStyle={{marginRight:10}} title="Następny" />
      <IconButton icon="chevron-up" bgColor="main" onClick={() => prev()} disabled={isPauseButtonDisabled()} title="Poprzedni" />
    </div>
  )
};

export default CurrentPlaylistTopBar;