import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'

import 'bootstrap/dist/css/bootstrap.min.css'

const NavLink: React.FunctionComponent<{href: string}> = ({href, children}) => {
    const router = useRouter();
    const NavLinkClasses = (active) => {
        if(active) {
            return "nav-link active";
        } else {
            return "nav-link"
        }
    }
    const NavLinkCurrent = (active) => {
        if(active) {
            return "page";
        } else {
            return null;
        }
    }
    const active = router.pathname == href;
    
    return (
        <li className='nav-item active'>
            <Link href={href}>
                <a className={NavLinkClasses(active)} aria-current={NavLinkCurrent}>{children}</a>
            </Link>
        </li>
    );
}

const NavBar: React.FunctionComponent<{}> = () => {
  return (
    <nav className='navbar navbar-expand-lg navbar-light bg-light'>
      <a className='navbar-brand' href='#'>
        Navbar
      </a>
      <button
        className='navbar-toggler'
        type='button'
        data-toggle='collapse'
        data-target='#navbarSupportedContent'
        aria-controls='navbarSupportedContent'
        aria-expanded='false'
        aria-label='Toggle navigation'
      >
        <span className='navbar-toggler-icon' />
      </button>
      <div className='collapse navbar-collapse' id='navbarSupportedContent'>
        <ul className='navbar-nav mr-auto'>
            <NavLink href="/">Home</NavLink>
            <NavLink href="/todo">Todo</NavLink>
        </ul>
      </div>
    </nav>
  )
}
export class Layout extends React.Component<{
  title: string
}> {
  render () {
    return (
      <div>
        <Head>
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <title>{this.props.title} - TestAppRuna</title>
        </Head>
        <header>
          <NavBar />
        </header>
        <main>{this.props.children}</main>
        <footer></footer>
      </div>
    )
  }
}
