<template>
  <v-row row v-if="this.formState.ready">
    <v-col cols="12" mt-1 mb-2 v-if="formState.errorBoxMessage">
      <v-alert
        ref="errorbox"
        v-show="formState.errorBoxMessage"
        color="error"
        icon="fa-exclamation-circle "
        transition="scale-transition"
        class="multi-line"
        outlined
        >{{ formState.errorBoxMessage }}</v-alert
      >
    </v-col>
    <v-col>
      <v-card id="ayaNovaVersioncard">
        <v-subheader>{{ lt("ClientApp") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("Version") }}: </span>
          <span class="body-2">{{ clientInfo.version }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("User") }}: </span>
          <span class="body-2">{{ this.$store.state.userName }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">12h: </span>
          <span class="body-2">
            {{ translation().getHour12() }}
          </span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("TimeZone") }}: </span>
          <span class="body-2">
            {{ translation().getBrowserTimeZoneName() }}
          </span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("LanguageCode") }}: </span>
          <span class="body-2">{{
            translation().getBrowserFirstLanguage()
          }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("CurrencyCode") }}: </span>
          <span class="body-2">{{ translation().getCurrencyName() }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("Browser") }}</v-subheader>
        <div v-for="(value, name) in browser" :key="name">
          <span class="ml-6 body-1">{{ name }}: </span>
          <span class="body-2">{{ value }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("Server") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("ServerAddress") }}: </span>
          <span class="body-2">{{ this.$store.state.apiUrl }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("Version") }}: </span>
          <span class="body-2">{{ serverInfo.serverVersion }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("SchemaVersion") }}: </span>
          <span class="body-2">{{ serverInfo.dbSchemaVersion }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("ServerTime") }}: </span>
          <span class="body-2">{{ serverInfo.serverLocalTime }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("TimeZone") }}: </span>
          <span class="body-2">{{ serverInfo.serverTimeZone }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("HelpLicense") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("RegisteredUser") }}: </span>
          <span class="body-2">{{
            serverInfo.license.license.licensedTo
          }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("DatabaseID") }}: </span>
          <span class="body-2">{{ serverInfo.license.license.dbId }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("LicenseSerial") }}: </span>
          <span class="body-2">{{ serverInfo.license.license.keySerial }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("LicenseExpiration") }}: </span>
          <span class="body-2">{{
            serverInfo.license.license.licenseExpiration
          }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("SupportedUntil") }}: </span>
          <span class="body-2">{{
            serverInfo.license.license.maintenanceExpiration
          }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("LicensedOptions") }}</v-subheader>

        <div
          v-for="item in serverInfo.license.license.features"
          :key="item.Feature"
        >
          <span class="ml-6 body-1">{{ item.Feature }}</span>
          <span class="body-2">{{ item.Count ? ": " + item.Count : "" }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
/* xeslint-disable */
import ayaNovaVersion from "../api/ayanova-version";

export default {
  created() {
    var vm = this;

    initForm(vm)
      .then(() => {
        vm.formState.ready = true;
        window.$gz.eventBus.$on("menu-click", clickHandler);
        generateMenu(vm);
        vm.formState.loading = false;
      })
      .catch(err => {
        vm.formState.ready = true;
        window.$gz.errorHandler.handleFormError(err, vm);
      });
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  mounted() {
    this.clientInfo = {};
    this.clientInfo = ayaNovaVersion;
  },
  data() {
    return {
      serverInfo: { license: { license: {} } },
      clientInfo: {},
      browser: {},
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  },
  methods: {
    lt(ltKey) {
      return window.$gz.translation.get(ltKey);
    },
    translation() {
      return window.$gz.translation;
    }
  }
};

//////////////////////
//
//
function generateMenu(vm) {
  var menuOptions = {
    isMain: false,
    icon: "fa-info-circle",
    title: window.$gz.translation.get("HelpAboutAyaNova"),
    helpUrl: "form-ay-about",
    menuItems: [
      {
        title: window.$gz.translation.get("Copy"),
        icon: "copy",
        surface: true,
        key: "about:copysupportinfo",
        vm: vm
      },
      {
        title: window.$gz.translation.get("Log"),
        icon: "glasses",
        surface: true,
        key: "app:nav:log",
        data: "ay-log"
      }
    ]
  };

  window.$gz.eventBus.$emit("menu-change", menuOptions);
}

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  var m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == "about" && !m.disabled) {
    switch (m.key) {
      case "copysupportinfo":
        //put the support info on the clipboard:
        var element = document.getElementById("ayaNovaVersioncard");
        var text = element.innerText || element.textContent;

        var logText = "";
        window.$gz._.forEach(m.vm.$store.state.logArray, function appendLogItem(
          value
        ) {
          logText += value + "\n";
        });
        window.$gz.util.copyToClipboard(text + "\nCLIENT LOG\n" + logText);
        break;
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          "About.vue::context click: [" + m.key + "]"
        );
    }
  }
}

/////////////////////////////////
//
//
function initForm(vm) {
  return new Promise(function(resolve, reject) {
    (async function() {
      try {
        await fetchTranslatedText(vm);
        await getServerInfo(vm);
        await getBrowserInfo(vm);
      } catch (err) {
        reject(err);
      }
      resolve();
    })();
  });
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
function fetchTranslatedText(vm) {
  var ltKeysRequired = [
    "HelpAboutAyaNova",
    "ClientApp",
    "Server",
    "Version",
    "SchemaVersion",
    "ServerTime",
    "ServerAddress",
    "TimeZone",
    "HelpLicense",
    "RegisteredUser",
    "DatabaseID",
    "LicenseSerial",
    "LicenseExpiration",
    "SupportedUntil",
    "LicensedOptions",
    "Log",
    "User",
    "Browser",
    "LanguageCode",
    "TimeZone",
    "CurrencyCode"
  ];

  return window.$gz.translation.fetch(ltKeysRequired);
}

////////////////////
//
function getServerInfo(vm) {
  return window.$gz.api.get("ServerInfo").then(res => {
    if (res.error != undefined) {
      throw res.error;
    } else {
      vm.serverInfo = res.data;
    }
  });
}

////////////////////
//
function getBrowserInfo(vm) {
  vm.browser = {
    platform: window.navigator.platform,
    userAgent: window.navigator.userAgent,
    languages: window.navigator.languages,
    tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
    oscpu: window.navigator.oscpu,
    maxTouchPoints: window.navigator.maxTouchPoints,
    webdriver: window.navigator.webdriver,
    vendor: window.navigator.vendor,
    availWidth: window.screen.availWidth,
    availHeight: window.screen.availHeight,
    width: window.screen.width,
    height: window.screen.height,
    devicePixelRatio: window.devicePixelRatio,
    pixelDepth: window.screen.pixelDepth
  };
}

//eoc
</script>
