import * as myra from 'myra'
import * as router from 'myra-router'
import RouteComponent from './route-component'


/**
 * State
 */
type State = {
    routeCtx: router.RouteContext
}
const init = {} as State

/**
 * Component
 */
export default myra.define(init, (evolve, events) => {

    const onRoute = (ctx: router.RouteContext) => console.log(ctx) >
        evolve({ routeCtx: ctx })

    events.didMount = () => router.addListener(onRoute)

    const routeTo = (path: string) => (ev: Event) => {
        ev.preventDefault()
        return router.routeTo(path)
    }

    // The render function is called after an update. 
    return state =>
        <section>
                'test1/:param': (params: any) => <RouteComponent {...params} />
            }, <nothing />)}

            {state.routeCtx && state.routeCtx.match('test1/:param').isMatch ?
                <p>Location '/test2/:param' matched.</p> : <nothing />}

            <ul class="list-group">
                <li class="list-group-item">
                    <a href="" onclick={routeTo('/test1')}>
                        Update location to '/test1'
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="" onclick={routeTo('/test1/test2')}>
                        Update location to '/test1/test2'
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="" onclick={ev => ev.preventDefault() > router.goBack()}>
                        Go back
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="" onclick={ev => ev.preventDefault() > router.goForward()}>
                        Go forward
                    </a>
                </li>
            </ul>
        </section>
})
            <h1>Router examples</h1>

            {state.routeCtx && state.routeCtx.matchAny({
                'test1': <p>Route to '/test1'.</p>,