import gql from 'graphql-tag'
import { Query } from 'react-apollo'
import Link from 'next/link'
import { InstrumentForm } from './Instrument'

const INSTRUMENTS = gql`
  query INSTRUMENTS {
    instruments {
      id
      name
      description
    }
  }
`

const InstrumentList = props => (
  <Query query={INSTRUMENTS}>
    {({ data, loading, error }) => {
      const content = [
        <h1>Instrument List</h1>
      ]
      if (loading) content.push(<p>Loading instruments...</p>)
      else if (error) content.push(<p>Error loading instruments: {error.message}</p>)
      else if (data.instruments.length > 0) content.push(
        <ul>
          {data.instruments.map(instrument => (
            <li key={instrument.id} title={instrument.description}>
              <Link href={{ pathname: 'instruments', query: { id: instrument.id } }}>
                <a>{instrument.name}</a>
              </Link>
            </li>
          ))}
        </ul>
      )
      else content.push(<p>No instruments found.</p>)
      content.push(<InstrumentForm />)
      return content
    }}
  </Query>
)

export default InstrumentList