import { useRouter } from 'next/router'
import { useVideoQuery } from '../../../src/gql'
import EditVideo from '../../../src/file/components/EditVideo'
import { AdminPage } from '../../../src/app'

const EditVideoPage = () => {
  const router = useRouter()
  const { id } = router.query

  const { data = undefined, error = undefined, loading = false } = id
    ? useVideoQuery({
        variables: { where: { id: typeof id === 'string' ? id : '' } },
      })
    : {}

  let content
  if (error) content = <p>Error loading video.</p>
  else if (loading) content = <p>Loading video...</p>
  else content = <EditVideo video={data?.video} />
  return <AdminPage>{content}</AdminPage>
}

export default EditVideoPage