const InstrumentCommandFields = {
  id: null,
  tag: '',
  name: '',
  description: '',
  readString: '',
  writeString: '',
  subsystem: '',
  parameters: []
}

const InstrumentCommandFormFields = props => {
  const { state, onChange } = props

  const toState = event => {
    const newState = {
      ...state,
      [event.target.name]: event.target.value
    }
    onChange(newState)
  }

  return (
    <fieldset>
      <label htmlFor='tag'>Tag</label>
      <input
        type='text'
        name='tag'
        id='tag'
        placeholder='Tag'
        value={state.tag}
        onChange={toState}
      />
      <label htmlFor='name'>Name</label>
      <input
        type='text'
        name='name'
        id='name'
        placeholder='Name'
        value={state.name}
        onChange={toState}
      />
      <label htmlFor='description'>Description</label>
      <textarea
        name='description'
        id='description'
        placeholder='Description'
        value={state.description}
        onChange={toState}
      />
      <label htmlFor='readString'>Read string</label>
      <input
        type='text'
        name='readString'
        id='readString'
        placeholder='Read string'
        value={state.readString}
        onChange={toState}
      />
      <label htmlFor='writeString'>Write string</label>
      <input
        type='text'
        name='writeString'
        id='writeString'
        placeholder='Write string'
        value={state.writeString}
        onChange={toState}
      />
    </fieldset>
  )
}

const InstrumentCommand = props => {
  const { command } = props

  return (
    <div>
      <h1>{command.name}</h1>
      <p>{command.description}</p>
      <p>Tag: {command.tag}</p>
      <pre>{command.readString}</pre>
      <pre>{command.writeString}</pre>
      <div>Here go the parameters</div>
    </div>
  )
}

export default InstrumentCommand
export { InstrumentCommandFields, InstrumentCommandFormFields }