import FormatSelector from './FormatSelector'
import { TextInput } from '../../form'
import { emptyBlockInstance, emptyExerciseInstance } from '../utils'
import ExerciseInstanceInputs from './ExerciseInstanceInputs'
import { TBlock } from '../types'
import BlockSelector from './BlockSelector'
import BlockList from './BlockList'
import VideoSelector from '../../file/components/VideoSelector'

interface IBlockInputs {
  onChange: GenericEventHandler
  value?: TBlock
  name: string
  className?: string
}

const BlockInputs = (props?: IBlockInputs) => {
  if (!props || !props.value) return null

  const { onChange, value, name, className } = props
  return (
    <fieldset className={className}>
      {!value.id.startsWith('++') && (
        <div className='block-info'>
          <div>{value.id}</div>
          <div>value.createdAt</div>
        </div>
      )}
      <TextInput name={`${name}.title`} label='Title' value={value.title} onChange={onChange} />
      <TextInput
        name={`${name}.description`}
        label='Description'
        value={value.description ?? ''}
        onChange={onChange}
      />
      <TextInput
        name={`${name}.duration`}
        label='Duration'
        value={value.duration ?? ''}
        type='number'
        onChange={onChange}
      />
      <FormatSelector name={`${name}.format`} value={value.format} onChange={onChange} />
      <TextInput
        name={`${name}.rest`}
        label='Rest'
        value={value.rest ?? ''}
        type='number'
        onChange={onChange}
      />
      <VideoSelector name={`${name}.videos`} value={value.videos} onChange={onChange} />
      <label>Blocks</label>
      <BlockList
        name={`${name}.blocks`}
        value={value.blocks}
        onChange={onChange}
        className='training-blocks'
      />
      <button
        onClick={(event) => {
          event.preventDefault()
          const newBlock = emptyBlockInstance({
            order: value.blocks ? value.blocks.length : 0,
          })
          onChange({
            target: {
              type: 'custom',
              name: `${name}.blocks`,
              value: value.blocks ? [...value.blocks, newBlock] : [newBlock],
            },
          })
        }}
        type='button'
      >
        Add block
      </button>
      <label>Exercises</label>
      {value.exercises && value.exercises.length > 0 && (
        <ExerciseInstanceInputs
          name={`${name}.exercises`}
          value={value.exercises}
          onChange={onChange}
        />
      )}
      <button
        onClick={(event) => {
          event.preventDefault()
          const newExercise = emptyExerciseInstance({
            order: value.exercises ? value.exercises.length : 0,
          })
          onChange({
            target: {
              type: 'custom',
              name: `${name}.exercises`,
              value: value.exercises ? [...value.exercises, newExercise] : [newExercise],
            },
          })
        }}
        type='button'
      >
        Add exercise
      </button>

      <style jsx>{`
        .block-info {
          display: flex;
          justify-content: space-between;
        }
      `}</style>
    </fieldset>
  )
}

export default BlockInputs
