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 xianyu from 'common/xianyu';
import OrderPayType from 'components/order-pay-type';
import OrderCouponList from 'components/order-coupon-list';
import OrderPromotionList from 'components/order-promotion-list';
import ChangeBidPriceDialog from 'components/change-bid-price-dialog';
import Bind from 'components/bind';
import ConfirmDialog from 'components/confirm-dialog';
import 'video.js/dist/video-js.css';

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('xianyu', xianyu);
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);
Vue.use(ConfirmDialog);
Vue.use(ChangeBidPriceDialog);

initClient(store);

xianyu.$router = router;
yoho.auth = async (args) => {
  let {
    refer,
    loginUrl
  } = args || {};
  let user = await sdk.getUser(true);

  if (user && user.uid) {
    return user;
  } else {
    cookie.set('third_backurl', refer || 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'
  });
});