import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'
import Gallery from './Gallery'
import InstrumentCommand from './InstrumentCommand'
import InstrumentParameter from './InstrumentParameter'

const InstrumentSubsystemFormFields = 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 InstrumentSubsystem = props => {
  const { subsystem } = props

  return subsystem ? (
    <div>
      <h1>{subsystem.name}</h1>
      <p>{subsystem.description}</p>
      <Gallery title='Commands' items={subsystem.commands.map(command =>
        <InstrumentCommand command={command} />)} />
      <Gallery title='Parameters' items={subsystem.parameters.map(parameter =>
        <InstrumentParameter parameter={parameter} />)} />
      <Gallery title='Subsystems' items={subsystem.subsystems.map(childSubsystem =>
        <InstrumentSubsystem subsystem={childSubsystem} />)} />
    </div>
  ) : (
    <p>No data found.</p>
  )
}

export default InstrumentSubsystem
export { InstrumentSubsystemFormFields }