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

import { Router, Route } from 'preact-router'

import Home from './containers/home';
import Page from './containers/page';

import Header from './components/header';
import Navigation from './components/navigation';
import Footer from './components/footer';

export default class Routes extends Component {

    constructor() {
        super();

        this.state = {
            menus: {},
            pages: {},
            page: {},
            posts: [],
            initiated: false
        }

        this.changed = (e) => {
            const pages = this.state.pages || {},
                  page = pages[e.url] || null;

            if (!page) {
                return;
            }

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

            console.dir(e);
            console.dir(page);

            // this.setState({
            //     categoryID: page.categoryID,
            //     // page: page
            // })

            document.title = page.title;

            // console.error('changed to: ' + e.url);
            // console.dir(e.url);
            // console.error('Page: ' + e.url);
            // console.dir(page);
            // console.log('categoryID: ' + page.categoryID);
        }
    }

    componentWillMount() {

        // // initial

        // this.setState({
        //     menus: state.menus,
        //     pages: state.pages,
        // })

        // console.dir(state);

        console.log('Routes: componentWillMount: ' + new Date().getTime());
    }

    componentDidMount() {
        console.log('Routes: componentDidMount: ' + new Date().getTime());
    }

    componentWillUnmount() {
        console.log('Routes: componentWillUnmount: ' + new Date().getTime());
    }

    componentWillReceiveProps() {
        console.log('Routes: componentWillReceiveProps: ' + new Date().getTime());
    }

    shouldComponentUpdate() {
    }

    componentWillUpdate() {
        console.log('Routes: componentWillUpdate: ' + new Date().getTime());
    }

    componentDidUpdate() {
        console.log('Routes: componentDidUpdate: ' + new Date().getTime());
    }

    render(props) {

        if (!this.state.initiated) {
            this.setState({
                initiated: true,
                menus: props.menus,
                pages: props.pages,
            })
        }


        // // this.setState({
        // //     categoryID: 13
        // // })

        // // state = Object.assign({}, props);

        // console.error('Routes: 17');
        // console.dir(this.state);
        // console.log('----------------');
        // console.dir(props);

        return (
            <div class="l-wrap">
                <Header />

                <Navigation  />

                <Router onChange={this.changed}>

                    <Route path="/" component={Home} page={this.state.page} />

                    <Route default component={Page} page={this.state.page} />

                </Router>

                <Footer menus={this.state.menus} />
            </div>
        )
    }
}
