import { supportsFullscreen } from '../../lib/platform'
import styles from '../../pages/IntroPage.module.css'

type IntroActionsProps = {
  cameraReady: boolean
  cameraDenied: boolean
  noHwAccel: boolean
  onEnableCamera: () => void
  onDismissNoHwAccel: () => void
  onStartFullscreen: () => void
  onStartWindowed: () => void
}

export function IntroActions({
  cameraReady,
  cameraDenied,
  noHwAccel,
  onEnableCamera,
  onDismissNoHwAccel,
  onStartFullscreen,
  onStartWindowed,
}: IntroActionsProps) {
  return (
    <>
      {noHwAccel ? (
        <div className={styles.actions}>
          <p className={`${styles.hwWarning} font-body`}>
            Hardware acceleration appears to be OFF - the game might be janky. For best performance,
            enable it in browser settings and restart.
          </p>
          <button
            type="button"
            className={`${styles.btn} ${styles.btnSecondary} font-title`}
            onClick={onDismissNoHwAccel}
          >
            CONTINUE ANYWAY
          </button>
        </div>
      ) : null}

      {!cameraReady && !cameraDenied ? (
        <div className={styles.actions}>
          <button
            type="button"
            className={`${styles.btn} ${styles.btnPrimary} font-title`}
            onClick={onEnableCamera}
          >
            ENABLE CAMERA
          </button>
          <p className={`${styles.cameraHint} font-caption`}>
            This game uses your webcam to detect dance moves
          </p>
        </div>
      ) : null}

      {cameraDenied ? (
        <div className={styles.actions}>
          <p className={`${styles.cameraDenied} font-body`}>
            Camera access is required to play. Please allow camera access and try again.
          </p>
          <button
            type="button"
            className={`${styles.btn} ${styles.btnSecondary} font-title`}
            onClick={onEnableCamera}
          >
            TRY AGAIN
          </button>
        </div>
      ) : null}

      {cameraReady ? (
        <div className={styles.actionsRow}>
          {supportsFullscreen() ? (
            <>
              <button
                type="button"
                className={`${styles.btn} ${styles.btnPrimary} font-title`}
                onClick={onStartFullscreen}
              >
                FULLSCREEN
              </button>
              <button
                type="button"
                className={`${styles.btn} ${styles.btnSecondary} font-title`}
                onClick={onStartWindowed}
              >
                WINDOWED
              </button>
            </>
          ) : (
            <button
              type="button"
              className={`${styles.btn} ${styles.btnPrimary} font-title`}
              onClick={onStartWindowed}
            >
              START
            </button>
          )}
        </div>
      ) : null}
    </>
  )
}
