<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-px-md q-py-xs rounded-borders"
    >
      <div class="justify-center" style="min-height: 36px">
        <template v-if="hasTestRole">
          <q-btn
            class="title"
            padding="xs lg"
            flat
            @click="() => (activeTab = 'InfoPanel')"
          >
            {{ $t('performancePanel.labelInfoPanel') }}
          </q-btn>
          <q-btn 
          padding="xs lg"
            class="q-ml-sm title"
            flat
            @click="() => (activeTab = 'InteractivePanel')"
          >
            {{ $t('performancePanel.labelInteractPanel') }}
          </q-btn>
        </template>
        <div
          v-else
          class="column justify-center text-h5 q-pa-sm"
          style="min-height: 36px"
        >
          {{ $t('performancePanel.labelInfoPanel') }}
        </div>
      </div>
      <div v-if="activeTab === 'InfoPanel' && hasPanels" class="col-auto">
        <q-btn @click="openDateDialog" color="primary" flat>
          {{ $t('performancePanel.refresh') }}
        </q-btn>
        <q-btn @click="resetPanels" color="primary" flat>
          {{ $t('performancePanel.reset') }}
        </q-btn>
      </div>
    </div>
    <component
      :is="activeTab"
      :resetPanels="needToReset"
      :showDateDialog="showDateDialog"
      :needToReset="needToReset"
      @hasPanels="(value) => (hasPanels = value)"
      @closeDateDialog="() => (showDateDialog = false)"
    />
  </div>
</template>
<script lang="ts">
import { USER_SCOPES } from '@/constants/entities/Scope';
import { Component, Vue } from 'vue-property-decorator';

import InfoPanel from './components/InfoPanel.vue';
import InteractivePanel from './components/InteractivePanel.vue';

@Component({
  components: {
    InfoPanel,
    InteractivePanel,
  }
})
export default class PerformancePanel extends Vue {
  private activeTab = 'InfoPanel';
  private showDateDialog = false;
  private hasPanels = false;
  private needToReset = false;

  openDateDialog(): void {
    this.showDateDialog = !this.showDateDialog;
  }

  resetPanels(): void {
    this.needToReset = true;
  }

  get hasTestRole(): boolean {
    if (this.$AC.haveScope(USER_SCOPES.TEST_APPLICATION_VIEWER)) {
      return true;
    }
    return false;
  }
}
</script>
<style lang="sass">
.aspect-ratio--16x9
  padding-bottom: 46.25%
  & .iframe
    position: absolute
    top: 0
    bottom: 0
    left: 0px
    right: 0

.grid
  display: grid

  &-table
    .q-table__middle
      display: none

.iframe
  display: block
  height: 100%
  width: 100%
.close-btn
  position: absolute
  right: 2px
  top: 2px
  z-index: 2
  padding: 2px
  border-radius: 10px
  &:hover 
    cursor: pointer
    background-color: rgba(156, 183, 197, 0.1)
.edit-btn
  position: absolute
  right: 22px
  top: 2px
  z-index: 2  
  padding: 2px
  border-radius: 10px
  &:hover 
    cursor: pointer
    background-color: rgba(156, 183, 197, 0.1)
.gridElement
  height: 70vh
.help-tooltip
  position: absolute
  right: 25px
  top: 1px
  z-index: 2
.title
  font-size: 16px
.cards-grid
  display: grid
  grid-template-columns: repeat(2, 2fr)
.card-header 
  padding-bottom: 0
.card-details
  text-align: center
  color: #b0bec5
  font-size: 11px
.title
  font-size: 1.5rem
  text-transform: none
</style>
