import React, {useContext} from 'react';
import {Navbar, Nav} from 'react-bootstrap';
import {Link} from 'found';

import {UserContext} from '../../context/User';

interface Props {
  children?: React.ReactNode;
}

function ApplicationLayout({children}: Props): React.ReactElement {
  const {user} = useContext(UserContext);

  return (
    <div>
      <nav>
        <Navbar expand='md'>
          <Link to='/'>
            <Navbar.Brand>Pokemon.trade</Navbar.Brand>
          </Link>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='mr-auto'>
              <Nav.Link as={Link} to='/pokemon'>
                View Pokemon
              </Nav.Link>
            </Nav>
            {user && user.email}
          </Navbar.Collapse>
        </Navbar>
      </nav>

      {children}

      {
        user ? (
          <p>
            <Link to='/logout'>
              Logout
            </Link>
          </p>
        ) : (
          <>
            <p>
              <Link to='/login'>Signin</Link>
            </p>
            <p>
              <Link to='/signup'>Signup</Link>
            </p>
          </>
        )
      }
      <p>
        <Link to='/pokemon'>Show me the pokemon!</Link>
      </p>
      <p>
        <Link to='/pokemon/create'>Create a pokemon!</Link>
      </p>
    </div>
  );
}

export default ApplicationLayout;