import gql from "graphql-tag";
import React from "react";
import { render } from "react-dom";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { ApolloProvider, Query } from "react-apollo";

const cache = new InMemoryCache();

const link = new HttpLink({
  uri: "https://swapi.graph.cool/"
});

const client = new ApolloClient({
  cache,
  link
});

const moviesQuery = gql`
  query MoviesQuery {
    allFilms {
      title
    }
  }
`;

const peopleQuery = gql`
  query PeopleQuery {
    allPersons(first: 3) {
      name
    }
  }
`;

class App extends React.Component {
  state = {
    showPeople: false
  };

  render() {
    const showPeople = this.state.showPeople;
    return (
      <ApolloProvider client={client}>
        <h2>no-cache movies</h2>
        <Query query={moviesQuery} fetchPolicy="no-cache">
          {({ data, error, loading }) =>
            error ? (
              <div>{JSON.stringify(error)}</div>
            ) : loading ? (
              <div>loading movies</div>
            ) : !data.allFilms ? (
              <div>movies not available</div>
            ) : (
              data.allFilms.map(film => <div>{film.title}</div>)
            )
          }
        </Query>
        <h2>cache-and-network people</h2>
        <button onClick={() => this.setState({ showPeople: !showPeople })}>
          {showPeople ? "hide people" : "show people"}
        </button>
        {showPeople && (
          <Query query={peopleQuery}>
            {({ data, error, loading }) =>
              error ? (
                <div>{JSON.stringify(error)}</div>
              ) : loading ? (
                <div>loading people</div>
              ) : !data.allPersons ? (
                <div>people not available</div>
              ) : (
                data.allPersons.map(person => <div>{person.name}</div>)
              )
            }
          </Query>
        )}
      </ApolloProvider>
    );
  }
}

render(<App />, document.getElementById("root"));