import React from "react";
import { Item } from "semantic-ui-react";
import { Query} from "react-apollo";
import gql from "graphql-tag";
import Movie from "./Movie";
import {Component} from "react";

const movieQuery = gql`
  query MovieListQuery($title: String!){
      movies: movies(subString: $title, limit:10) {
        title
        movieId
        imdbRating
        plot
        poster
        year
        genres
        similar {
          movieId
          poster
          title
        }
      }
    }
  `;

class MovieList extends Component {
  render() {
    return (
      <Query query={movieQuery} variables={this.props}>
        {(result) => {
          if (result.loading) return <div>Loading...</div>;
          if (result.error) return <div>Error!</div>

          const { data } = result;


      return <Item.Group divided>
        {data.movies.map(movie => (
          <Movie
            key={movie.movieId}
            title={movie.title}
            poster={movie.poster}
            plot={movie.plot}
            rating={movie.imdbRating}
            genres={movie.genres}
            similar={movie.similar}
            year={movie.year}
          />
        ))}
          </Item.Group>
        }}
      </Query>
    );
  }
};

export default MovieList;