import Vue from 'vue';
import {
  ROUTE_CHANGE,
} from 'store/yoho/types';
import {createApp} from './app';
import {createApi} from 'create-api';
import {Style, Toast, Dialog} from 'cube-ui'; //eslint-disable-line
import Lazy from 'vue-lazyload';
import yoho from 'common/yoho';
import 'statics/scss/common.scss';
import 'statics/font/iconfont.css';
import 'statics/font/ufofont.css';

const {app, router, store} = createApp(window.__INITIAL_STATE__ && window.__INITIAL_STATE__.yoho.context);

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

window._router = store.state.yoho.context.route;

Vue.prop('yoho', yoho);
Vue.use(Toast);
Vue.use(Dialog);
Vue.prop('api', createApi());
Vue.use(Lazy, {error: ''});

router.onReady(() => {
  store.dispatch('reportYas', {
    params: {
      appop: 'YB_H5_PAGE_OPEN_L',
      param: {
        F_URL: `${location.origin}${router.currentRoute.fullPath}`,
        PAGE_URL: '',
        PAGE_NAME: router.currentRoute.name
      }
    }
  });

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

      store.commit(ROUTE_CHANGE, {to, from});

      if (window._hmt) {
        window._hmt.push(['_trackPageview', to.fullPath]);
      }
      store.dispatch('reportYas', {
        params: {
          appop: 'YB_H5_PAGE_OPEN_L',
          param: {
            F_URL: `${location.origin}${to.fullPath}`,
            PAGE_URL: `${location.origin}${from.fullPath}`,
            PAGE_NAME: from.name
          }
        }
      });

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

router.onError(e => {
  store.dispatch('reportError', {error: e});
  router.push({name: 'error.500'});
});