import React from 'react'
import styled from 'styled-components'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'

const StyledProjectList = styled.div`
  font-size: 90%;
`

const QUERY_PROJECTS = gql`
  query QUERY_PROJECTS {
  projects {
    id
    name
    abbreviation
    description
    images {
      id
      filename
      mimetype
      size
    }
  }
}
`

class ProjectList extends React.Component {
  selectItem = event => {
    console.log(event.target)
  }

  render() {
    return (
      <Query query={QUERY_PROJECTS}>
        {({ data, error, loading }) => {
          const { projects } = data
          return (
            <StyledProjectList>
              <h2>Project list</h2>
              {data.length ? (
                <ul>
                  {projects.map(project => (
                    <li key={project.id} onClick={this.selectItem}>{project.name}</li>
                  ))}
                </ul>
              ) : (
                  <p>No projects found.</p>
                )}
              <button>+</button>
            </StyledProjectList>
          )
        }}
      </Query>
    )
  }
}

export default ProjectList