<template>
  <v-row v-if="this.formState.ready" v-resize="onResize">
    <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
    <v-col cols="12">
      <v-btn @click="refreshProfile">
        <v-icon>$ayiSync</v-icon>
      </v-btn>
    </v-col>
    <v-col cols="12">
      <v-card elevation="4" data-cy="profileCard">
        <v-card :height="cardHeight">
          <iframe
            id="profileFrame"
            style="width:100%;height:100%"
            :src="profileUrl()"
          ></iframe>
        </v-card>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

const FORM_KEY = "ops-profile";

export default {
  async created() {
    let vm = this;
    try {
      await initForm(vm);
      window.$gz.eventBus.$on("menu-click", clickHandler);
      generateMenu(vm);
      // vm.getDataFromApi();
      this.formState.ready = true;
    } catch (err) {
      vm.formState.ready = true;
      window.$gz.errorHandler.handleFormError(err, vm);
    }
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  data() {
    return {
      cardHeight: 300,

      formState: {
        ready: false,
        loading: false,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  },

  methods: {
    onResize() {
      this.cardHeight = window.innerHeight * 0.85;
    },

    profileUrl() {
      // "http://localhost:7575/profiler/results-index?t=l47NWWuZo89MU1GuHV/tYY0d2xwsFrY/K5MZb1zTTvY";
      return (
        window.$gz.api.ServerBaseUrl() +
        "profiler/results-index?t=" +
        this.$store.state.downloadToken
      );
    },

    refreshProfile() {
      let ifr = document.getElementById("profileFrame");
      ifr.src = ifr.src;
    }
  }
};

//////////////////////
//
//
function generateMenu(vm) {
  let menuOptions = {
    isMain: true,
    icon: "$ayiBinoculars",
    title: "ServerProfiler",
    helpUrl: "form-ops-profile",
    formData: {
      ayaType: window.$gz.type.ServerMetrics
    },
    menuItems: [
      //   {
      //     title: "Copy"),
      //     icon: "$ayiCopy",
      //     surface: false,
      //     key: FORM_KEY + ":copylog",
      //     vm: vm
      //   }
    ]
  };

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

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  let m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      //   case "copylog":
      //     //put the log info on the clipboard:
      //     window.$gz.util.copyToClipboard("SERVER LOG\n" + m.vm.log);
      //     break;
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

/////////////////////////////////
//
//
async function initForm(vm) {
  await fetchTranslatedText(vm);
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText(vm) {
  await window.$gz.translation.cacheTranslations(["ServerProfiler"]);
}
</script>
