import Vue from 'vue';
import App from './App.vue';
import router from './router';

//Do not change store import.
//Exact match alias set to support
//dotenv customizations.
import store from './store';

import {
  AlertPlugin,
  BadgePlugin,
  ButtonPlugin,
  BVConfigPlugin,
  CardPlugin,
  CollapsePlugin,
  DropdownPlugin,
  FormPlugin,
  FormCheckboxPlugin,
  FormDatepickerPlugin,
  FormFilePlugin,
  FormGroupPlugin,
  FormInputPlugin,
  FormRadioPlugin,
  FormSelectPlugin,
  FormTagsPlugin,
  InputGroupPlugin,
  LayoutPlugin,
  LinkPlugin,
  ListGroupPlugin,
  ModalPlugin,
  NavbarPlugin,
  NavPlugin,
  PaginationPlugin,
  ProgressPlugin,
  TablePlugin,
  TabsPlugin,
  ToastPlugin,
  TooltipPlugin,
} from 'bootstrap-vue';
import Vuelidate from 'vuelidate';
import i18n from './i18n';
import HighchartsVue from 'highcharts-vue';
import VueRandomColor from 'vue-randomcolor';
import { getDateByTimeZone } from '@/utilities/_sila/convertTimeZone';

/*Vue.filter('formatDate', function (value) {
  const isUtcDisplay = store.getters['global/isUtcDisplay'];

  if (value instanceof Date && !isNaN(value)) {
    if (isUtcDisplay) {
      return value.toISOString().substring(0, 10);
    }
    const pattern = `yyyy-MM-dd`;
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return format(value, pattern, { timezone });
  }
});*/

Vue.filter('formatDate', function (value) {
  let timeZone = store.getters['global/timeZone'].split(' ')[1];
  let bmcDate = getDateByTimeZone(value, timeZone);

  if (!bmcDate) {
    return;
  }

  let year = bmcDate.getFullYear();
  let month = bmcDate.getMonth() + 1;
  let day = bmcDate.getDate();
  if (month < 10) {
    month = '0' + month;
  }

  return `${year}-${month}-${day}`;
});

/*Vue.filter('formatTime', function (value) {
  const isUtcDisplay = store.getters['global/isUtcDisplay'];

  if (value instanceof Date) {
    if (isUtcDisplay) {
      let timeOptions = {
        timeZone: 'UTC',
        hourCycle: 'h23',
      };
      return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
    }
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const pattern = `HH:mm:ss O`;
    return format(value, pattern, { timezone }).replace('GMT', 'UTC');
  }
});*/

Vue.filter('formatTime', function (value) {
  let utcOffset = store.getters['global/timeZone'].split(' ')[0];
  let timeZone = store.getters['global/timeZone'].split(' ')[1];
  let bmcDate = getDateByTimeZone(value, timeZone);

  if (!bmcDate) {
    return;
  }

  let hours = bmcDate.getHours();
  let minutes = bmcDate.getMinutes();
  let sec = bmcDate.getSeconds();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  if (sec < 10) {
    sec = '0' + sec;
  }

  return `${hours}:${minutes}:${sec} ${utcOffset}`;
});

Vue.filter('truncate', function (text, length, suffix) {
  const arrRaw = text.split(' ');
  const arr = arrRaw.filter((word) => word !== '');
  if (arr.length > length) {
    return arr.splice(0, length).join(' ') + suffix;
  } else {
    return text;
  }
});

// Plugins
Vue.use(AlertPlugin);
Vue.use(BadgePlugin);
Vue.use(ButtonPlugin);
Vue.use(BVConfigPlugin, {
  BFormText: { textVariant: 'secondary' },
  BTable: {
    headVariant: 'light',
    footVariant: 'light',
  },
  BFormTags: {
    tagVariant: 'primary',
    addButtonVariant: 'link-primary',
  },
  BBadge: {
    variant: 'primary',
  },
});
Vue.use(CardPlugin);
Vue.use(CollapsePlugin);
Vue.use(DropdownPlugin);
Vue.use(FormPlugin);
Vue.use(FormCheckboxPlugin);
Vue.use(FormDatepickerPlugin);
Vue.use(FormFilePlugin);
Vue.use(FormGroupPlugin);
Vue.use(FormInputPlugin);
Vue.use(FormRadioPlugin);
Vue.use(FormSelectPlugin);
Vue.use(FormTagsPlugin);
Vue.use(InputGroupPlugin);
Vue.use(LayoutPlugin);
Vue.use(LayoutPlugin);
Vue.use(LinkPlugin);
Vue.use(ListGroupPlugin);
Vue.use(ModalPlugin);
Vue.use(NavbarPlugin);
Vue.use(NavPlugin);
Vue.use(PaginationPlugin);
Vue.use(ProgressPlugin);
Vue.use(TablePlugin);
Vue.use(TabsPlugin);
Vue.use(ToastPlugin);
Vue.use(TooltipPlugin);
Vue.use(Vuelidate);
Vue.use(HighchartsVue);
Vue.use(VueRandomColor);

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');