import "@babel/polyfill";
import "@fortawesome/fontawesome-free/css/all.css";
import "typeface-roboto/index.css";
import Vue from "vue";
import "./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 from "dayjs";
import gzdatepicker from "./components/gzdatepicker.vue";

/////////////////////////////////////////////////////////////////
// FORM VALIDATION
//
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
Vue.config.productionTip = false;

/////////////////////////////////////////////////////////////////
// ERROR HANDLING
//
Vue.config.errorHandler = errorHandler.handleVueError;
window.onerror = errorHandler.handleGeneralError;

/////////////////////////////////////////////////////////////////
// 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() {
  // eslint-disable-next-line
  //console.log("Show spinner");
  NProgress.start();
});

document.addEventListener("fetchEnd", function() {
  // eslint-disable-next-line
  //console.log("Hide spinner");
  NProgress.done();
});

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

Vue.filter("shortdate", function(value) {
  if (!value) return "";
  var dj = dayjs(value);
  return dj.format("YYYY-MM-DD hh:mm:ss A");
});

Vue.filter("currency", function(value) {
  if (!value) return "";
  return "$" + value;
});

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

//COMPONENT DATE TEST
//

Vue.component("gz-date-picker", gzdatepicker);

// Vue.component("GzDatePicker", {
//   props: {
//     value: Date
//   },
//   render() {
//     return this.$createElement("v-date-picker", {
//       props: {
//         ...this.$attrs,
//         value: this.value ? this.value.toISOString().substr(0, 10) : null
//       },
//       on: {
//         ...this.$listeners,
//         input: date => this.$emit("input", new Date(date))
//       }
//     });
//   }
// });

// Vue.component("AltGzDatePicker", {
//   props: {
//     value: String
//   },
//   data: function() {
//     return {
//       ogdate: ""
//     };
//   },
//   render() {
//     return this.$createElement("v-date-picker", {
//       props: {
//         ...this.$attrs,
//         value: this.value ? this.value.substr(0, 10) : null
//       },
//       on: {
//         ...this.$listeners,
//         input: date => this.$emit("input", new Date(date).toISOString())
//       }
//     });
//   }
// });

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