import theme from '../../styles/theme'

import TrainingBlock from './TrainingBlock'
import Link from 'next/link'
import { ITraining } from '../types'
import TrainingMeta from './TrainingMeta'
import { useRouter } from 'next/router'
import { useTrainingLazyQuery } from '../../gql'

const Training = ({ training }: { training: ITraining }) => {
  return (
    <article>
      <h2>{training.title}</h2>

      <TrainingMeta training={training} />

      <section>
        <h2>Program</h2>
        <Link href='/timer'>
          <button>Start Timer</button>
        </Link>
        {training.blocks &&
          training.blocks
            .sort(block => block.sequence || 0)
            .map(block => <TrainingBlock key={block.id} block={block} />)}
      </section>

      <style jsx>
        {`
          article {
            display: grid;
            grid-template-areas:
              'title title'
              'information placeholder'
              'content content';
            grid-template-columns: 1fr 2fr;
            background-image: url('media/man_working_out.jpg');
            background-size: auto 400px;
            background-repeat: no-repeat;
            margin: 2em 0;
          }

          article > * {
            padding: 0.2em 1em;
            margin: 0;
          }

          article > h2 {
            grid-area: title;
            font-weight: 900;
            font-size: 120%;
            background: ${theme.colors.darkerblue};
            color: ${theme.colors.offWhite};
          }

          section {
            grid-area: content;
            padding: 1em 2em;
          }

          span.caption {
          }

          button {
            border: none;
            background: ${theme.colors.darkblue};
            color: ${theme.colors.offWhite};
            font-weight: 900;
            padding: 0.5rem;
            cursor: pointer;
          }
        `}
      </style>
    </article>
  )
}

export default Training