import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import locale from 'view-design/dist/locale/vi-VN';
import i18nLoader from '@/vue/i18n/vue';
import { appStyleCss } from '@/vue/styles/app.js';

export const loadeStyleApp = () => {
  const iviewStyle = document.createElement('link');
  iviewStyle.href = 'https://unpkg.com/view-design@4.7.0/dist/styles/iview.css';
  iviewStyle.type = 'text/css';
  iviewStyle.rel = 'stylesheet';
  document.getElementsByTagName('head')[0].appendChild(iviewStyle);

  if (true) {
    const fontAwesome = document.createElement('link');
    fontAwesome.href = ' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
    fontAwesome.type = 'text/css';
    fontAwesome.rel = 'stylesheet';
    document.getElementsByTagName('head')[0].appendChild(fontAwesome);
  }

  const appStyle = document.createElement('style');
  appStyle.innerHTML = appStyleCss;
  document.getElementsByTagName('head')[0].appendChild(appStyle);
  return true;
};

/**
 *
 * @param {VueComponent} App
 * @returns
 */
export const createVueApp = (App) => {
  loadeStyleApp();

  Vue.use(ViewUI, {
    transfer: true,
    size: 'default',
    capture: false,
    select: {
      arrow: 'md-arrow-dropdown',
      arrowSize: 20,
    },
    locale,
  });

  Vue.use(VueI18n);

  return new Vue({
    render: (h) => h(App),
    i18n: i18nLoader(),
  });
};

export const createContainerApp = (vueAppId) => {
  const vueAppContainer = document.createElement('div');
  vueAppContainer.id = vueAppId;

  return vueAppContainer;
};
