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

const InstrumentList = props => (
  <Query query={INSTRUMENTS_QUERY}>
    {({ data, loading, error }) => {
      return (
        <>
          <h1>Instrument List</h1>
          {loading ? (
            <p>Loading instruments...</p>
          ) : error ? (
            <p>Error loading instruments: {error.message}</p>
          ) : !data.instruments.length ? (
            <p>No instruments found.</p>
          ) : (
            <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>
          )}
          <Link href={{ pathname: 'instruments', query: { mode: 'add' } }}>
            <a>Add an instrument</a>
          </Link>
          <InstrumentForm />
        </>
      )
    }}
  </Query>
)

export default InstrumentList