import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'

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

  return (
    <fieldset>
      <label htmlFor='name'>Name</label>
      <input type='text' name='name' id='name' placeholder='Name' value={state.name} onChange={onChange} />
      <label htmlFor='description'>Name</label>
      <textarea name='description' id='description' placeholder='Description' value={state.description} onChange={onChange} />
    </fieldset>
  )
}

const InstrumentCommand = props => {
  const { command } = props
  const state = {
    id: null,
    tag: '',
    name: '',
    description: '',
    instrument: null,
    readString: '',
    writeString: '',
    parameters: []
  }

  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 { InstrumentCommandFormFields }