import React from "react";
import { Item } from "semantic-ui-react";
import Movie from "./Movie";
import {Component} from "react";
import { Connect, query } from "urql";

const movieQuery = `
  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 (
      <div>
      <Connect
        query={query(movieQuery, this.props)}
        render={({ loaded, data, error }) => {

          if (error) return <div>Error!</div>
          if (!loaded) return <div>Loading...</div>;

          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>
        }}
        />
        </div>
    );
  }
};

export default MovieList;