// app/index/index.es6.js
import router from 'app/redux/router';
import m from 'mithril';
import {store, observeStore} from 'app/redux/store';

const index = {};
index.view = () => {
    return m('div', [
        m('h1', [
            'path: ',
            m.route()
        ]),
        m('ul', [
            m('li', m('a', {
                href: '/home',
                config: m.route
            }, 'Home')),
            m('li', m('a', {
                href: '/favorites',
                config: m.route
            }, 'Favorites')),
            m('li', m('a', {
                href: '/settings',
                config: m.route
            }, 'Settings'))
        ])
    ]);
};

m.route.mode = 'hash';
const routes = {
    '/': router(m.component(index)),
    '/home': router(m.component(index)),
    '/favorites': router(m.component(index)),
    '/settings': router(m.component(index))
};

// To debug changes
observeStore(store, (state) => state.route.path, (path) => {
    console.log("changed path", path);
});

m.route(document.body, '/', routes);