import { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useRouter } from 'next/router'
import React, { ChangeEvent, useState } from 'react'
import ApiVideoPlayer, { PlayerTheme } from '@api.video/react-player'

interface IVideoViewProps {
  children: React.ReactNode
  videoId: string
  uploaded: string
}
const VideoView: NextPage<IVideoViewProps> = ({
  videoId,
  uploaded,
}): JSX.Element => {
  const [playerTheme, setPlayerTheme] = useState<PlayerTheme>({
    link: 'rgb(235, 137, 82)',
    linkHover: 'rgb(240, 95, 12)',
  })
  const [hideControls, setHideControls] = useState<boolean>(false)
  const router = useRouter()

  const handleChangeSetting = (e: ChangeEvent<HTMLInputElement>) =>
    setPlayerTheme({
      ...playerTheme,
      [e.currentTarget.id]: e.currentTarget.value,
    })

  return (
    <div className="global-container">
      <Head>
        <title>Video view</title>
        <meta
          name="description"
          content="Generated by create next app & created by api.video"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <header>
        {uploaded ? (
          <>
            <span>Already there</span> 🎉
          </>
        ) : (
          <>
            <span>Here's your player</span> 👀
          </>
        )}
      </header>

      <main>
        <div className="texts-container">
          <p>
            This player is generated by the{' '}
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/apivideo/api.video-react-player"
            >
              api.video's React player component
            </a>
            .<br />
            It provides multiple properties to customize your video player.
          </p>
          <p>Try 3 of them just below 👇</p>
        </div>

        <div className="inputs-container">
          <div>
            <label>Play button color</label>
            <input
              id="link"
              type="text"
              placeholder="Play button color"
              value={playerTheme.link}
              onChange={handleChangeSetting}
            />
          </div>
          <div>
            <label>Buttons hover color</label>
            <input
              id="linkHover"
              type="text"
              placeholder="Buttons hover color"
              value={playerTheme.linkHover}
              onChange={handleChangeSetting}
            />
          </div>
          <div>
            <input
              type="checkbox"
              checked={hideControls}
              onChange={(e) => {
                setHideControls(e.currentTarget.checked)
              }}
            />
            <label>Hide controls</label>
          </div>
        </div>
        <ApiVideoPlayer
          video={{ id: videoId }}
          style={{ width: '75%', height: 300 }}
          theme={playerTheme}
          chromeless={hideControls}
        />

        <button
          className="upload"
          onClick={() => router.push(uploaded ? '/uploader' : '/videos')}
        >
          {uploaded ? 'Another video?' : 'Videos list'}
        </button>
      </main>

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
        <span>and</span>
        <a href="https://api.video" target="_blank" rel="noopener noreferrer">
          api.video
        </a>
      </footer>
    </div>
  )
}

export default VideoView

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { videoId, uploaded } = context.query
  return { props: { videoId, uploaded: uploaded ?? null } }
}
