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 { initClient } from 'utils/init-client';
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);

initClient(store);

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

  if (user && user.uid) {
    return user;
  } else {
    cookie.set('third_backurl', location.href, {
      domain: '.yohobuy.com',
      path: '/',
    });

    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) => {
    if (from.query.bind_code) {
      app.$createThirdBind().close();
    } else if (to.query.bind_code) {
      app.$createThirdBind().show();
    }

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