import { useQuery } from '@apollo/client'
import Link from 'next/link'

import Training from '../components/training'
import initialData from '../initial-data.js'
import { TRAININGS } from '../lib/graphql'

console.log(initialData)

const Home = () => {
  const { data, error, loading } = useQuery(TRAININGS)

  return (
    <>
      <section>
        <h1>Stay in Shape with u-fit</h1>
        <p>u-fit is a high intensity interval training offered by u-blox.</p>
        <aside>
          <div id='trainingTime'>
            <span className='caption'>When</span>
            <span className='data'>Tuesdays, 11:45-12:30</span>
          </div>
          <div id='trainingEquipment'>
            <span className='caption'>Equipment</span>
            <span className='data'>Towel, water, optional: yoga mat</span>
          </div>
        </aside>
      </section>

      <section id='nextTraining'>
        {error && (<p>Error {error.message}</p>)}
        {loading && (<p>Loading...</p>)}
        {data ? (
          <Training
            {...{
              ...data.trainings[data.trainings.length - 1],
              title: `Your Next Training: ${
                data.trainings[data.trainings.length - 1].title
                }`
            }}
          />
        ) : (<p>Nothing found...</p>)}
        <Link href={{ pathname: '/training' }}>
          <a>create training...</a>
        </Link>
      </section>
    </>
  )
}

export default Home