<template>
  <q-menu @before-show="onBeforeShow" @show="onShow" @before-hide="onHide" anchor="top right" self="top left">
    <q-list class="profile-popup-container">
      <q-item dense v-close-popup class="version q-py-xs">
        <q-item-section></q-item-section>
        <q-item-section side>
          <q-item-label class="text-grey-6 on-right">
            ЕРВУ@{{ version }}
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item class="menu-item q-px-xs" dense clickable @click="openProfilePage" v-close-popup>
        <q-item-section style="min-width: initial" class="q-px-none" avatar>
          <q-avatar icon="manage_accounts" />
        </q-item-section>
        <q-item-section>Профиль</q-item-section>
      </q-item>
      <q-separator />
      <q-item class="menu-item q-px-xs" dense clickable @click="signOut">
        <q-item-section style="min-width: initial" class="q-px-none" avatar>
          <q-avatar icon="logout" />
        </q-item-section>
        <q-item-section>Выход</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</template>

<script>
import { version, releaseInternal } from '../../package.json';
import { oidcClientMethods } from '@state/modules/oidc-client';

export default {
  name: 'MProfilePopup',
  data() {
    return {
      version,
      contextMenu: null,
    };
  },
  methods: {
    openProfilePage() {
      this.$router.push({
        name: 'profile',
      });
    },
    signOut() {
      this.logoutOidcClient();
    },
    onBeforeShow() {
      this.$emit('show');
    },
    onShow() {
      if (releaseInternal) {
        console.info(
          `%creleaseInternal >>> ${releaseInternal}`,
          'font-style: italic; background-color: navy;padding: 3px; color: white; border-radius: 2px;'
        );
      }
      this.$emit('show');
    },
    onHide() {
      this.$emit('hide');
    },
    ...oidcClientMethods
  }
};
</script>

<style lang="scss"> /* если вернуть scoped то сломает последний стиль */

.profile-popup-container {
  .menu-item {
    color: rgba(2, 12, 18, 0.7);
    font-family: 'Golos UI';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;      
  }
  .version {
    font-family: 'Golos Text';
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    border-top: #e0e0e0;
    min-height: unset;
    background-color: #f5f5f5;
  }
}

// Костыль для решения проблемы появления scrollbar-а на мониторах с изменённым масштабированием UI
// Воспроизводилось на Windows с масштабированием на 125%, scrollbar появлялся в контекстном меню
// это определение не может быть 'scoped'
// has() гарантирует что выберется именно наше меню
.q-menu.q-position-engine.scroll:has(.q-list.profile-popup-container) {
  overflow: hidden;
}

</style>