import { useExercisesQuery, ExercisesQuery } from '../../../src/gql'
import { FunctionComponent } from 'react'
import { TExercise } from '../../../src/training/types'
import { AdminList } from '../../../src/app'
import theme from '../../../src/styles/theme'

const AdminExercise: FunctionComponent<{ item: TExercise; className?: string }> = ({
  item,
  className,
}) => {
  return (
    <div className={className}>
      <div className='admin-training-title'>{item.name}</div>{' '}
      <div className='admin-training-description'>{item.description}</div>
      <div className='admin-training-info'>{item.parentExerciseInstances?.length}</div>
      <style jsx>{`
        .${className} {
          display: flex;
        }
        .admin-training-title {
          width: 15%;
        }
        .admin-training-description {
          width: 65%;
        }
        .admin-training-info {
          width: 20%;
          text-align: right;
        }
        button {
          margin: 0 0.4em;
          padding: 0;
          color: ${theme.colors.buttonBackground};
          background-color: transparent;
        }
      `}</style>
    </div>
  )
}

const AdminExercises = () => {
  const props = {
    name: 'Exercises',
    adminMenu: '/admin/exercise',
    get: useExercisesQuery,
    dataKey: 'exercises' as keyof ExercisesQuery,
    Component: AdminExercise,
  }
  return <AdminList {...props} />
}

export default AdminExercises