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

const $app = document.getElementById('app');

const isDegrade = Boolean(!($app && $app.attributes['data-server-rendered']));
const context = get(window, '__INITIAL_STATE__.yoho.context');
const {app, router, store} = createApp(context);

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

window._router = get(store, 'state.yoho.context.route');

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

const fetchAsycData = (matched, r) => {
  const asyncDataPromises = matched
    .map(({asyncData}) => asyncData && asyncData({store, router: r})).
    filter(p => p);

  return Promise.all(asyncDataPromises);
};

const trackPage = (path) => {
  if (window._hmt) {
    try {
      window._hmt.push(['_trackPageview', path]);
    } catch (error) {
      console.error(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
      }
    }
  });

  if (isDegrade) {
    fetchAsycData(router.getMatchedComponents(), router.currentRoute);
  }

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

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

      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
          }
        }
      });

      fetchAsycData(matched, to)
        .then(next)
        .catch(e => {
          store.dispatch('reportError', {error: e});
          console.error(e);
          return next();
        });
    } catch (e) {
      store.dispatch('reportError', {error: e});
      return next();
    }
  });
  app.$mount(isDegrade ? '#degrade-app' : '#app');
});

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