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

const CREATE_INSTRUMENT_SUBSYSTEM = gql`
  mutation CREATE_INSTRUMENT_SUBSYSTEM($name: String!, $description: String!) {
    createInstrumentSubsystem(name: $name, description: $description) {
      id
    }
  }
`

const UPDATE_INSTRUMENT_SUBSYSTEM = gql`
  mutation UPDATE_INSTRUMENT_SUBSYSTEM($name: String, $description: String, $commands: [ID]) {
    updateInstrumentSubsystem(name: $name, description:$description, commands: $commands) {
      id
    }
  }
`

const InstrumentSubsystemFields = {
  id: null,
  name: '',
  description: '',
  commands: [],
  parameters: [],
  subsystems: []
}

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 { InstrumentSubsystemFields, InstrumentSubsystemFormFields }
export { CREATE_INSTRUMENT_SUBSYSTEM }