import * as React from 'react';
import {RouteComponentProps} from 'react-router';
import {Link} from 'react-router-dom';

import {Pokemon} from '../../../api';

export interface IPokemon {
  id: number;
  nickname: string;
}

interface State {
  pokemon: IPokemon;
}

interface Props extends RouteComponentProps<any> {}

class PokemonShow extends React.Component<Props, State> {
  state = {
    pokemon: {
      id: null,
      nickname: null,
    },
  };

  async componentDidMount() {
    try {
      const data = await Pokemon.get(this.props.match.params.id);
      this.setState({pokemon: data.data});
    } catch (err) {
      // eslint-disable-next-line no-console
      console.log(JSON.stringify(err, null, 2));
    }
  }

  render(): JSX.Element {
    return (
      <>
        {this.state.pokemon.id}: {this.state.pokemon.nickname}
        <p>
          <Link to={`${this.props.match.url}/404`}>404 page</Link>
        </p>
      </>
    );
  }
}

export default PokemonShow;