import 'babel-polyfill';
import Vue from 'vue';
import {
    ROUTE_CHANGE,
    PAGE_INIT_VISIBLE,
} from 'store/yoho/types';
import FastClick from 'fastclick';
import {createApp} from './app';
import {createApi} from 'create-api';
import {createYoRouter} from 'common/router.js';
import yoho from '../public/js/yoho';
import message from 'components/message';
import 'statics/scss/common.scss';
import 'statics/scss/animation.scss';
import 'statics/font/iconfont.css';
import 'statics/scss/font.scss';

FastClick.attach(document.body);


const {app, router, store} = createApp();

if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
}
Vue.prop('yoho', yoho);
Vue.prop('message', message);
Vue.prop('bus', new Vue());
Vue.prop('api', createApi());
Vue.prop('yoRouter', createYoRouter(router, store));


document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        store.commit(PAGE_INIT_VISIBLE, {visible: false});
        setTimeout(() => {
            store.commit(PAGE_INIT_VISIBLE, {visible: true});
        }, 500);
    }
});

router.onReady(() => {
    router.beforeResolve((to, from, next) => {
        const matched = router.getMatchedComponents(to);

        store.commit(ROUTE_CHANGE, to);

        Promise.all(matched.map(({asyncData}) =>
            asyncData && asyncData({store, router: to})))
            .then(() => {
                if (!yoho.isAndroid || store.state.yoho.visible) {
                    return next();
                } else {
                    history.pushState({}, '', from.fullPath);
                }
            })
            .catch(next);
    });
    app.$mount('#app');
});