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

import {IndexQueryResponse} from '../../../__generated__/IndexQuery.graphql';
import environment from '../../../graphqlEnvironment';
import PokemonShow from './Show';

function PokemonIndex(): React.ReactNode {
  return (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query IndexQuery {
          pokemonConnection {
            edges {
              node {
                id
                ...Show_pokemon
              }
            }
          }
        }
      `}
      render={({error, props}: ReadyState<IndexQueryResponse>): React.ReactNode => {
        if (error) {
          return <div>Error!</div>;
        }
        if (!props) {
          return <div>Loading...</div>;
        }
        return (
          <ul>
            {props.pokemonConnection.edges.map(
              (edge): React.ReactNode => (
                <li key={edge.node.id}>
                  <PokemonShow pokemon={edge.node} />
                </li>
              )
            )}
          </ul>
        );
      }}
      variables={{}}
    />
  );
}

export default PokemonIndex;