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

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>)
      if (error) content.push(<p>Error loading instruments: {error.message}</p>)

      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>)
      }
      return content
    }}
  </Query>
)

export default InstrumentList