import preact, { h, Component } from 'preact'; // eslint-disable-line no-unused-vars

import AsyncRoute from 'preact-async-route';

// import Location from '../components/location';

// import { Link } from 'preact-router';

export default class Navigation extends Component {

    constructor() {
        super();
    }

    render(props) {
        const pages = props.pages || [],
              page = props.page || {};

        console.error('navigation: ' + new Date().getTime());

        return (
            <nav id="nav" class="l-nav" role="navigation">

                <ul id="nav-list" class="o-nav c-nav">
                    {pages.sort((a, b) => a.order > b.order).map(item => {
                        let classCSS = 'o-nav--link c-nav--link';

                        if (item.objectID === page.ID) {
                            classCSS += ' is-active--nav--link'
                        }

                        return (
                            <li class="o-nav--item c-nav--item">
                                <a class={classCSS} href={item.path}>{item.title}</a>
                            </li>
                        );
                    })}
                </ul>

                <div id="sticker" class="o-box c-box--sticker" data-sticker="4" />

                <div id="map" class="o-box c-box--map">
                    <AsyncRoute page={page} getComponent={() => import('./location' /* webpackChunkName: 'location' */ ).then(module => module.default)} loading={() => <h1>loading ...</h1>} />
                </div>

                <div class="o-box">
                    <h2>OPENING HOURS</h2>

                    <h3 class="u-no--margin">Town Vilnius</h3>
                    <p>MON: 8:00-22:00</p>

                    <h3 class="u-no--margin">Town Kaunas</h3>
                    <p>MON: 10:00-22:00</p>

                    <h3 class="u-no--margin">Steak for Break</h3>
                    <p>MON: 11:00-22:00</p>

                    <p>
                        <a href="/" class="u-weight-700" title="The Town Steakhouse restaurants opening hours">More details</a>
                    </p>
                </div>

            </nav>
        );
    }
}



