import React from 'react';
import { PlayState } from './App';
import {
  CloudDownloadIcon,
  FastForwardIcon,
  PauseIcon,
  PlayIcon,
  RewindIcon,
  ZoomInIcon,
  ZoomOutIcon,
} from '@heroicons/react/solid';

interface Props {
  playState: PlayState;
  onTogglePlay: () => void;
  onClip: () => void;
  onZoomIn: () => void;
  onZoomOut: () => void;
}

const ControlBar: React.FC<Props> = React.memo((props: Props) => {
  const buttonStyle =
    'bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded';

  const largeButtonStyle =
    'bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded absolute right-0';

  const iconStyle = 'inline h-6 w-6 text-white-500';

  const playPauseComponent =
    props.playState == PlayState.Playing ? (
      <PauseIcon className={iconStyle} />
    ) : (
      <PlayIcon className={iconStyle} />
    );

  return (
    <>
      <div className="relative grow-0 w-full py-2 space-x-2">
        <button className={buttonStyle}>
          <RewindIcon className={iconStyle} />
        </button>
        <button className={buttonStyle} onClick={props.onTogglePlay}>
          {playPauseComponent}
        </button>
        <button className={buttonStyle}>
          <FastForwardIcon className={iconStyle} />
        </button>
        <button className={buttonStyle} onClick={props.onZoomIn}>
          <ZoomInIcon className={iconStyle} />
        </button>
        <button className={buttonStyle} onClick={props.onZoomOut}>
          <ZoomOutIcon className={iconStyle} />
        </button>
        <button className={largeButtonStyle} onClick={props.onClip}>
          <CloudDownloadIcon className={`${iconStyle} mr-2`} />
          Download clip
        </button>
      </div>
    </>
  );
});

ControlBar.displayName = 'ControlBar';
export { ControlBar };
