import React, {useState} from 'react';
import {Form, Button} from 'react-bootstrap';
import {withRouter, RouterState, Router} from 'found';

import environment from '../../../graphqlEnvironment';
import {createPokemon} from './CreatePokemon';

function onSubmit(
  e: Event,
  router: Router,
  nickname: string,
  pokedexNumber: number
): void {
  e.preventDefault();
  createPokemon(environment, router, nickname, pokedexNumber);
}

const Create: React.FC<RouterState> = ({
  router,
}: RouterState): React.ReactElement<void> => {
  const [nickname, setNickname] = useState('');
  const [pokedexNumber, setPokedexNumber] = useState(1);

  return (
    <Form onSubmit={e => onSubmit(e, router, nickname, pokedexNumber)}>
      <Form.Group controlId='nickname'>
        <Form.Label>Nickname</Form.Label>
        <Form.Control
          onChange={e => setNickname(e.target.value)}
          placeholder='Pokemon Nickname'
        />
      </Form.Group>

      <Form.Group controlId='pokedexNumber'>
        <Form.Label>National Pokedex Number</Form.Label>
        <Form.Control
          max={809}
          min={1}
          onChange={e => setPokedexNumber(e.target.value)}
          placeholder='Nation Pokedex Number'
          type='number'
        />
      </Form.Group>
      <Button type='submit' variant='primary'>
        Submit
      </Button>
    </Form>
  );
};

export default withRouter(Create);