import { TextInput, DateTimeInput, Checkbox } from '../../form'
import TrainingTypeSelector from './TrainingTypeSelector'
import BlockInstanceInputs from './BlockInstanceInputs'
import { TrainingQuery } from '../../gql'
import { emptyBlockInstance } from '../constants'

const TrainingInputs = ({
  values,
  onChange,
  name = ''
}: {
  values: NonNullable<TrainingQuery['training']>
  name: string
  onChange: GenericEventHandler
}) => {
  return (
    <>
      <TextInput
        name='title'
        label='Title'
        value={values.title}
        onChange={onChange}
      />
      <TrainingTypeSelector
        name='type'
        value={values.type}
        onChange={onChange}
      />
      <DateTimeInput
        name='trainingDate'
        label='Training date'
        value={values.trainingDate}
        onChange={onChange}
      />
      <TextInput
        name='location'
        label='Location'
        value={values.location}
        onChange={onChange}
      />
      <TextInput
        name='attendance'
        label='Attendance'
        type='number'
        value={values.attendance}
        onChange={onChange}
      />
      <Checkbox
        name='published'
        label='Published'
        value={values.published}
        onChange={onChange}
      />
      <label>Blocks</label>
      {values.blocks && (
        <BlockInstanceInputs
          name='blocks'
          value={values.blocks}
          onChange={onChange}
        />
      )}
      <button
        onClick={event => {
          event.preventDefault()
          console.log('add')
          onChange({
            target: {
              type: 'custom',
              name: 'blocks',
              value: values.blocks
                ? [
                    ...values.blocks,
                    { ...emptyBlockInstance, order: values.blocks.length - 1 }
                  ]
                : [{ ...emptyBlockInstance, order: 0 }]
            }
          })
        }}
        type='button'
      >
        Add block
      </button>
    </>
  )
}

export default TrainingInputs
