import React from 'react'
import { createRouter, routerEvents } from 'the-react-router'
import { Navbar } from './navbar'
import { ProductsPage, ProductPage, HomePage, FallbackPage } from './pages'
 
// Listen to route changes
routerEvents.addListener(event => console.log(event))
 
// Specify routes and fallback
const routes = {
  fallback: FallbackPage,
  routes: [
    {
      path: '/',
      exact: true,
      component: HomePage
    },
    {
      path: '/products',
      component: ProductsPage
    },
    {
      path: '/products/:id',
      component: ProductPage
    }
  ]
}
 
// Router handles the url, params etc and provides the context
// Routes listenes to context changes and render the correct page
const [Router, Routes] = createRouter(routes)
 
export const App = () => {
  return (
    <Router>
      <Navbar />
      <Routes />
    </Router>
  )
}

  export const ProductsPage = () => {
    const { navigate } = useNavigation()
    return (
      <div>
        PRODUCTS
        <ul>
          <li onClick={() => navigate('/products/1')}>Product 1</li>
          <li onClick={() => navigate('/products/2')}>Product 2</li>
          <li onClick={() => navigate('/products/3')}>Product 3</li>
        </ul>
      </div>
    )
  }

  function ProductsPage() {
    return <Link to="/products/1">Product 1</Link>
  }

<Link to="/products/1" state={{ name: 'Product 1', clickPos: { x, y } }}>Product 1</Link>

  interface RouteState {
    name: string,
    clickPos: { x: number, y: number }
  }
 
  export const ProductPage = () => {
    const { params, state: { routeState } } = useNavigation<{ id: string }, RouteState>()
 
    return (
      <div>
        Product number: {params.id}
        Name from state: {routeState?.name}
        Pos from state: {routeState?.clickPos.x}, {routeState?.clickPos.y}
      </div>
    )
  }