import * as React from 'react';
import {graphql, QueryRenderer} from 'react-relay';

import environment from '../../graphql_environment';

class RelayTest extends React.Component {
  render() {
    const {id} = this.props.match.params;

    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query relayTestQuery($pokemonID: ID!) {
            node(id: $pokemonID) {
              id
              ... on Pokemon {
                iid
                nickname
                pokedexNumber
                createdAt
                updatedAt
              }
            }
          }
        `}
        render={({error, props}) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return (
            <ul>
              <li>ID: {props.node.id}</li>
              <li>IID: {props.node.iid}</li>
              <li>nickname: {props.node.nickname}</li>
              <li>pokedexNumber: {props.node.pokedexNumber}</li>
              <li>createdAt: {props.node.createdAt}</li>
              <li>updatedAt: {props.node.updatedAt}</li>
            </ul>
          );
        }}
        variables={{pokemonID: 'UG9rZW1vbi0yMDE='}}
      />
    );
  }
}

export default RelayTest;