import Vue, { DirectiveOptions } from "vue";
import "normalize.css";
import ElementUI from "element-ui";
import SvgIcon from "vue-svgicon";
import VueDataTables from "vue-data-tables";
import VueMoment from "vue-moment";
import MomentTimeZone from "moment-timezone";
import VueCryptojs from "vue-cryptojs";
import VueSignaturePad from "vue-signature-pad";
import VJsoneditor from "v-jsoneditor";
import InfiniteLoading from "vue-infinite-loading";
import "reflect-metadata";
import "vue-advanced-cropper/dist/style.css";
import "vue-advanced-cropper/dist/theme.compact.css";
import { VueReCaptcha } from "vue-recaptcha-v3";
import interact from "interactjs";
import "./styles/element-variables.scss";
import "./styles/index.scss";

import App from "./App.vue";
import store from "./store";
import { AppModule } from "./store/modules/app";
import router from "./router";
import i18n from "./lang";
import "./icons/components";

import "./pwa/register-service-worker";
import * as directives from "./directives";

import { listener } from "./utils/form-touched";
import VueSanitize from "vue-sanitize";

// to ensure that the soft keyboard appear on IOS
const selectCom: any = ElementUI.Select;

selectCom.computed.readonly = function () {
  const doc: any = document;
  const isIE = !this.$isServer && !Number.isNaN(Number(doc.documentMode));

  if (!this.filterable) {
    return true;
  }

  return !(this.filterable || this.multiple || isIE) && !this.visible;
};

// ensure that the input is blur when the dropdownlist is hidden
// selectCom.methods.toggleMenu = function () {
//   if (!this.selectDisabled) {
//     if (this.menuVisibleOnFocus) {
//       this.menuVisibleOnFocus = false;
//     } else {
//       this.visible = !this.visible;
//     }
//     if (this.visible) {
//       (this.$refs.input || this.$refs.reference).focus();
//     } else {
//       (this.$refs.input || this.$refs.reference).blur();
//     }
//   }
// };

// const picker: any = ElementUI.DatePicker;
// picker.mixins[0].watch.pickerVisible = function (val: any) {
//   if (this.readonly || this.pickerDisabled) return;
//   if (val) {
//     this.showPicker();
//     this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value;
//   } else {
//     this.hidePicker();
//     this.emitChange(this.value);
//     this.userInput = null;
//     if (this.validateEvent) {
//       this.dispatch("ElFormItem", "el.form.blur");
//     }
//     this.$emit("blur", this);
//     this.blur();

//     const ref = this.$refs.reference;
//     if (ref && ref.$el) {
//       setTimeout(() => {
//         listener(ref, ref.$el.children[0]);
//       }, 200);
//     }
//   }
// };

// for route leave checking, trigger listener when switch change
const switches: any = ElementUI.Switch;
switches.watch.checked = function () {
  this.$refs.input.checked = this.checked;
  if (this.activeColor || this.inactiveColor) {
    this.setBackgroundColor();
  }
  if (this.validateEvent) {
    this.dispatch("ElFormItem", "el.form.change", [this.value]);
  }
  listener(this.$refs.input, this.$refs.input);
};

Vue.use(ElementUI, {
  size: AppModule.size, // Set element-ui default size
  i18n: (key: string, value: string) => i18n.t(key, value),
});

Vue.use(SvgIcon, {
  tagName: "svg-icon",
  defaultWidth: "1em",
  defaultHeight: "1em",
});

Vue.use(VueDataTables);
Vue.use(VueMoment, { MomentTimeZone });
Vue.use(VueCryptojs);
Vue.use(VueSignaturePad);
Vue.use(VJsoneditor);
Vue.use(InfiniteLoading);
Vue.use(VueReCaptcha, {
  siteKey: "6LeYgLkkAAAAACaGbaJnoaAGSeP6cdVTsaf80ufP",
  autoHideBadge: true,
});
Vue.use(interact);
Vue.use(VueSanitize);

// Register global directives
Object.keys(directives).forEach((key) => {
  Vue.directive(key, (directives as { [key: string]: DirectiveOptions })[key]);
});

// Register global filter functions
// Object.keys(filters).forEach((key) => {
//   Vue.filter(key, (filters as { [key: string]: Function })[key])
// })

Vue.config.productionTip = false;

const pluginKeypresses = (_Vue: any) => {
  const keyPresses: any = {
    Control: false,
  };
  window.onkeyup = function (e: any) {
    keyPresses[e.key] = false;
  };
  window.onkeydown = function (e: any) {
    // If user use ctr + f or ctr + g to find item during multiple select for dams items
    // it will become unable to detect key up for ctr btn
    if (keyPresses.Control && (e.key === "f" || e.key === "g")) {
      keyPresses.Control = false;
    }
    keyPresses[e.key] = true;
  };
  _Vue.prototype.$keyPresses = _Vue.observable(keyPresses);
};
Vue.use(pluginKeypresses);

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