/* Xeslint-disable */
import "@fortawesome/fontawesome-free/css/all.css";
import "typeface-roboto/index.css";
import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";
import errorHandler from "./api/errorhandler";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import dayjs, { Dayjs } from "dayjs";
import UTC from "dayjs/plugin/utc"; // load on demand
dayjs.extend(UTC); // use plugin
import lodash from "./libs/lodash.min.js";

//my libs
import gzeventbus from "./api/eventbus";
import gzmenu from "./api/gzmenu";
import gzdialog from "./api/gzdialog";
import gzutil from "./api/gzutil";
import locale from "./api/locale";
import gzapi from "./api/gzapi";
import gzreport from "./api/gzreport";
import gzform from "./api/gzform";
import gzformcustomtemplate from "./api/form-custom-template";
import authorizationroles from "./api/authorizationroles";
import gztype from "./api/ayatype";
import "@/assets/css/main.css";

//controls
import dateTimeControl from "./components/date-time-control.vue";
import dateControl from "./components/date-control.vue";
import timeControl from "./components/time-control.vue";
import tagPicker from "./components/tag-picker.vue";
import customFieldsControl from "./components/custom-fields-control.vue";
import errorhandler from "./api/errorhandler";

/////////////////////////////////////////////////////////////////
// LIBS AND GLOBAL ITEMS
// NOTE: I'm putting them on Window deliberately to be globally available
// some say this is bad only due to if you want to server render the page
// (which is not necessary here anyway)
// however when I researched that I found it's easily worked around
// as all you need is a "window" global var defined and then it's all good in the hood
// so for convenience and far less fuckery this is the way
//

window.$gz = {
  locale: locale,
  formCustomTemplate: gzformcustomtemplate,
  type: gztype,
  role: authorizationroles,
  eventBus: gzeventbus,
  menu: gzmenu,
  dialog: gzdialog,
  util: gzutil,
  dayjs: dayjs,
  _: lodash,
  api: gzapi,
  form: gzform,
  report: gzreport,
  errorHandler: errorhandler,
  store: store
};

/////////////////////////////////////////////////////////////////
// ERROR HANDLING
//

//**************************************************************
//**************************************************************
//**************************************************************
//DEVELOPMENT MODE HANDLER
//THIS SHOULD BE FALSE IN RELEASE
errorHandler.developmentModeShowErrorsImmediately(true);
//**************************************************************
//**************************************************************
//**************************************************************

Vue.config.errorHandler = errorHandler.handleVueError;
window.onerror = errorHandler.handleGeneralError;
//warnings, only occur by default in debug mode not production
Vue.config.warnHandler = errorHandler.handleVueWarning;

//added for vuetify 2.x to disable annoying prodution mode tip warning
//but commented out for now just to see what it looks like
Vue.config.productionTip = false;

/////////////////////////////////////////////////////////////////
// AJAX LOADER INDICATOR
//
// Store a copy of the fetch function
var _oldFetch = fetch;

// Create our new version of the fetch function
window.fetch = function() {
  // Create hooks
  var fetchStart = new Event("fetchStart", {
    view: document,
    bubbles: true,
    cancelable: false
  });
  var fetchEnd = new Event("fetchEnd", {
    view: document,
    bubbles: true,
    cancelable: false
  });

  // Pass the supplied arguments to the real fetch function
  var fetchCall = _oldFetch.apply(this, arguments);

  // Trigger the fetchStart event
  document.dispatchEvent(fetchStart);

  fetchCall
    .then(function() {
      // Trigger the fetchEnd event
      document.dispatchEvent(fetchEnd);
    })
    .catch(function() {
      // Trigger the fetchEnd event
      document.dispatchEvent(fetchEnd);
    });

  return fetchCall;
};

document.addEventListener("fetchStart", function() {
  NProgress.start();
});

document.addEventListener("fetchEnd", function() {
  NProgress.done();
});

/////////////////////////////////////////////////////////////////
// FILTERS
//

//TODO: These almost all need more work to format as proper numeric value (comma versus decimal etc)

Vue.filter("capitalize", function vueFilterCapitalize(value) {
  if (!value) return "";
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

//Convert date to localized value and return as short date format chosen
Vue.filter("shortdatelocalized", function vueFilterShortDateLocalized(value) {
  if (!value) return "";

  return dayjs
    .utc(value)
    .add(locale.format().timeZoneOffset, "hour")
    .format(locale.format().shortDateAndTime);
});

//Convert date to localized value and return as short date format chosen
Vue.filter("shortdateonlylocalized", function vueFilterShortDateOnlyLocalized(
  value
) {
  //TODO NOT DONE
  if (!value) return "";

  return dayjs
    .utc(value)
    .add(locale.format().timeZoneOffset, "hour")
    .format(locale.format().shortDateAndTime);
});

//Convert date to localized value and return as short date format chosen
Vue.filter("shorttimeonlylocalized", function vueFilterShortTimeOnlyLocalized(
  value
) {
  //TODO NOT DONE
  if (!value) return "";

  return dayjs
    .utc(value)
    .add(locale.format().timeZoneOffset, "hour")
    .format(locale.format().shortDateAndTime);
});

Vue.filter("currency", function vueFilterCurrency(value) {
  if (!value) return "";
  return locale.format().currencySymbol + value;
});

Vue.filter("decimal", function vueFilterDecimal(value) {
  if (!value) return "";
  return "dec.fltr." + value;
});

Vue.filter("boolastext", function vueFilterBoolAsText(value) {
  if (!value) return "";
  return value ? "Yup" : "Nope";
});

Vue.filter("enum", function vueFilterDecimal(value, enumtype) {
  if (!value) return enumtype + ".";
  return enumtype + "." + value; //todo: actual values here
});

/////////////////////////////////////////////////////////////
//GZ COMPONENTS
//
Vue.component("gz-date-time-picker", dateTimeControl);
Vue.component("gz-date-picker", dateControl);
Vue.component("gz-time-picker", timeControl);
Vue.component("gz-tag-picker", tagPicker);
Vue.component("gz-custom-fields", customFieldsControl);

/////////////////////////////////////////////////////////////
//DIRECTIVES
//
//Auto focus on forms
Vue.directive("focus", {
  // When the bound element is inserted into the DOM...
  inserted: function(el) {
    // Focus the element
    el.focus();
  }
});

/////////////////////////////////////////////////////////////////
// INSTANTIATE
//
new Vue({
  vuetify: Vuetify,
  router,
  store,
  render: h => h(App)
}).$mount("#app");