import { Query } from 'react-apollo'
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 = () => (
  <>
    <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'>
      <Query query={TRAININGS}>
        {({ data, error, loading }) => {
          if (error) return <p>Error {error.message}</p>
          if (loading) return <p>Loading...</p>
          if (data.trainings.length) {
            console.log(data)
            return (
              <>
                <Training
                  {...{
                    ...data.trainings[data.trainings.length - 1],
                    title: `Your Next Training: ${
                      data.trainings[data.trainings.length - 1].title
                    }`
                  }}
                />
              </>
            )
          } else return <p>Nothing found...</p>
        }}
      </Query>
      <Link href={{ pathname: '/training' }}>
        <a>create training...</a>
      </Link>
    </section>
  </>
)

export default Home