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} />
    );

  // Detect if the space bar has been used to trigger this event, and ignore
  // it if so. This conflicts with the player interface.
  const filterMouseEvent = (evt: React.MouseEvent, cb: () => void) => {
    if (evt.detail == 0) {
      return;
    }
    cb();
  };

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

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