content: import React from 'react'
  import { connect } from 'react-redux'
  
  import Button from 'material-ui/Button'
  
  import Instance from './Instance'
  import onSubmit from './onSubmit'
  
  import findRegisteredInstitutions from './findRegisteredInstitutions'
  
  export default connect(mapStateToProps)(({
    draft,
    onChange,
    institutions,
    tournament,
    dispatch,
    onNext
  }) => {
    const registeredInstitutions = findRegisteredInstitutions(draft, institutions)
  
    return (
      <div>
        {draft.map((draftItem, index) =>
          <Instance
            key={index}
            draft={draft}
            draftItem={draftItem}
            draftIndex={index}
            onChange={onChange}
            registeredInstitutions={registeredInstitutions}
          />
        )}
        <div
          className={'flex flex-row justify-end mt3'}
        >
          <Button
            color={'secondary'}
            onClick={() => onChange([])}
            children={'CLEAR'}
          />
          <Button
            variant={'raised'}
            color={'primary'}
            onClick={() => {
              onSubmit(
                draft,
                tournament,
                dispatch,
                onChange
              )
              if (onNext) { onNext() }
            }}
            children={'SUBMIT'}
            disabled={registeredInstitutions.length > 0}
          />
        </div>
      </div>
    )
  })
  
  function mapStateToProps (state, ownProps) {
    return {
      institutions: Object.values(state.institutions.data),
      tournament: state.tournaments.current.data
    }
  }
  