import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';

import { Button, NotSupported } from 'components';

import run, { hasSupport } from '../../apis/screen-capture';

function ScreenCapture() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div
      className="
        tw-flex
        tw-flex-col
        tw-items-start
      "
    >
      <div className="tw-space-x-4">
        <Button leftIcon={<FaPlayCircle />} onClick={run.onCapture}>
          Start Capture
        </Button>

        <Button leftIcon={<FaStopCircle />} onClick={run.onStop}>
          Stop capture
        </Button>
      </div>

      <div
        className="
          tw-flex
          tw-flex-col
          tw-w-full
          tw-mt-6
          tw-overflow-hidden
          tw-border
        tw-border-gray-200
          tw-rounded-lg
        "
      >
        <div
          className="
            tw-aspect-w-16
            tw-aspect-h-9
          "
        >
          <video id="js-screen--video" className="tw-w-full" autoPlay />
        </div>

        <span
          className="
            tw-p-4
            tw-border-t
            tw-border-gray-200
            tw-font-semibold
            tw-text-gray-600
          "
        >
          Live preview
        </span>
      </div>
    </div>
  );
}

export default ScreenCapture;