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 Prompt from 'plugins/grass-prompt';
import bus from 'plugins/bus';

import {get, find} from 'lodash';
import yoho from 'common/yoho';
import sdk from 'common/sdk';
import links from 'utils/links';
import {initClient, getYohoState} from 'utils/init-client';
import 'statics/scss/common.scss';
import 'statics/scss/grass-prompt.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, {yoho: getYohoState()});

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.prop('links', links);
Vue.prop('auth', function() {
  if (!get(this.$store, '$context.isLogin')) {
    this.$sdk && this.$sdk.goLogin && this.$sdk.goLogin();
    return false;
  }

  return true;
});

Vue.prop('bus', bus());
Vue.use(Prompt);
Vue.use(Toast);
Vue.use(Dialog);
Vue.use(ActionSheet);
Vue.prop('api', createApi(context, store));

initClient(store);

const getReportParamsKey = (name) => {
  let key;

  switch (name) {
    case 'article.comment':
      key = 'articleId';
      break;
    case 'topic':
    case 'topic.share':
      key = 'topicId';
      break;
    default:
      key = 'id';
      break;
  }

  return key;
};

const trackPage = (path) => {
  if (window._hmt) {
    try {
      window._hmt.push(['_trackPageview', path]);
    } catch (error) {
      console.error(error);
    }
  }
};

router.onReady(() => {
  if (isDegrade) {
    store.commit(ROUTE_CHANGE, {to: router.currentRoute});
  }
  router.beforeResolve((to, from, next) => {
    store.commit('SET_STATUS_BAR_COLOR', {
      color: get(to, 'meta.statusBarColor')
    });

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

      store.dispatch('reportYas', {
        params: {
          appop: 'YB_H5_PAGE_OPEN_L',
          param: {
            PAGE_URL: `${location.origin}${to.fullPath}`,
            PAGE_NAME: to.name
          }
        }
      });

      store.dispatch('reportYas', {
        params: {
          appop: 'YB_H5_PAGE_FLR_C',
          param: {
            F_URL: `${location.origin}${from.fullPath}`,
            PAGE_URL: `${location.origin}${to.fullPath}`,
            PAGE_NAME: to.name
          }
        }
      });

      store.dispatch('reportYas', {
        params: {
          appop: 'YB_PAGE_ENTER',
          param: {
            PAGE_ID: to.name,
            TYPE_ID: to.params[getReportParamsKey(to.name)],
            SOURCE_ID: from.name,
            PAGE_NEW_CREATE: !!find(get(store, 'state.yoho.historys'), history => {
              return history.path === to.path;
            })
          }
        }
      });

      store.dispatch('reportYas', {
        params: {
          appop: 'YB_PAGE_EXIT',
          param: {
            PAGE_ID: from.name,
            TYPE_ID: from.params[getReportParamsKey(from.name)]
          }
        }
      });

      if (get(store, 'state.yoho.direction') === 'back') {
        store.dispatch('reportYas', {
          params: {
            appop: 'YB_PAGE_FINISH',
            param: {
              PAGE_ID: from.name,
              TYPE_ID: from.params[getReportParamsKey(from.name)]
            }
          }
        });
      }

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