import * as React from 'react';
import {graphql, createFragmentContainer} from 'react-relay';
import {Link} from 'react-router-dom';

// eslint-disable-next-line @typescript-eslint/camelcase, camelcase
import {Show_pokemon} from '../../../__generated__/Show_pokemon.graphql';

interface Props {
  // eslint-disable-next-line @typescript-eslint/camelcase, camelcase
  pokemon: Show_pokemon;
}

function PokemonShow<Props>(): React.FunctionComponentElement<void> {
  const {
    pokemon: {iid, nickname, pokedexNumber, createdAt, updatedAt},
  } = this.props;

  return (
    <>
      <ul>
        <li>IID: {iid}</li>
        <li>nickname: {nickname}</li>
        <li>pokedexNumber: {pokedexNumber}</li>
        <li>createdAt: {createdAt}</li>
        <li>updatedAt: {updatedAt}</li>
      </ul>
      <p>
        <Link to={`/pokemon/${iid}/404`}>404 page</Link>
      </p>
    </>
  );
}

export default createFragmentContainer(
  PokemonShow,
  graphql`
    fragment Show_pokemon on Pokemon {
      iid
      pokedexNumber
      nickname
      createdAt
      updatedAt
    }
  `
);