import Vue from 'vue';
import {
  ROUTE_CHANGE,
} from 'store/yoho/types';
import {createApp} from './app';
import {createApi} from 'create-api';
import {Style, Toast, Dialog, DatePicker, ImagePreview} from 'cube-ui'; //eslint-disable-line
import {get} from 'lodash';
import Lazy from 'vue-lazyload';
import cookie from 'yoho-cookie';
import yoho from 'common/yoho';
import OrderPayType from 'components/order-pay-type';
import OrderCouponList from 'components/order-coupon-list';
import OrderPromotionList from 'components/order-promotion-list';
import Bind from 'components/bind';

import sdk from 'yoho-activity-sdk';
import 'statics/scss/common.scss';
import 'statics/font/iconfont.css';
import 'statics/font/ufofont.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);
const api = createApi();

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(DatePicker);
Vue.use(Dialog);
Vue.use(ImagePreview);
Vue.prop('api', api);
Vue.use(Lazy, { error: '' });
Vue.use(OrderPayType);
Vue.use(OrderCouponList);
Vue.use(OrderPromotionList);
Vue.use(Bind);


yoho.auth = async(loginUrl) => {
  let user = await sdk.getUser();

  if (user && user.uid) {
    return user;
  } else {
    cookie.set('third_backurl', location.href);
    location.href = loginUrl || `${location.origin}/xianyu/passport/login/taobao`;
    return;
  }
}

yoho.authRealName = async() => {
  if (await yoho.auth()) {
    let res = await api.get('/api/ufo/sellerOrder/entryStatus');

    if (res.code === 200) {
      store.commit('SET_USER_SELLER_INFO', res.data);

      if (!get(res.data, 'isZhiMaCertWithPhoto')) {
        router.push({
          name: 'passport.auth'
        });
        return;
      }
    }

    return res;
  }

  return {
    code: 403,
    message: '未登录'
  };
}

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