import { useRouter } from 'next/router'
import EditTraining from '../../../src/training/components/EditTraining'
import { useTrainingQuery } from '../../../src/gql'
import { AdminPage } from '../../../src/app'
import { emptyTraining } from '../../../src/training/utils'

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

  const { data = { training: emptyTraining() }, error = undefined, loading = false } =
    typeof id === 'string' ? useTrainingQuery({ variables: { id } }) : {}

  let content
  if (loading) content = <p>Loading data...</p>
  else if (error) content = <p>Error loading data.</p>
  else if (!data) content = <p>No data found.</p>
  else content = <EditTraining training={data.training} />

  return <AdminPage>{content}</AdminPage>
}

export default EditTrainingPage