<template>
  <v-menu v-bind="$attrs">
    <template #activator="{ props: menu }">
      <v-tooltip open-delay="1000" location="right">
        <template #activator="{ props: tooltip }">
          <v-list-item
            v-bind="mergeProps(menu, tooltip)"
            class="mx-auto py-0"
            width="42px"
            min-height="30px"
            color="primary"
            prepend-icon="help"
          />
          <div class="text-center text-xs-semibold">
            <span>{{ t('labels.help') }}</span>
          </div>
        </template>
        <span>{{ t('labels.help') }}</span>
      </v-tooltip>
    </template>
    <v-list>
      <v-list-item prepend-icon="help" @click="knowledgeBase">
        <v-list-item-title>{{ t('labels.helpDesk') }}</v-list-item-title>
      </v-list-item>
      <v-list-item prepend-icon="keyboard" @click="m_shortcuts = true">
        <v-list-item-title>{{ t('labels.keyboardShortcuts') }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
  <KeyboardShortcuts v-model="m_shortcuts" />
</template>

<script setup lang="ts">
import { openUrl } from '@/functions/openUrl';
import { mergeProps, ref } from 'vue';
import { useI18n } from 'vue-i18n';

defineOptions({ inheritAttrs: false });

const { t } = useI18n();

const m_shortcuts = ref<boolean>(false);

function knowledgeBase(): void {
  openUrl('https://3dicomviewer.com/knowledgebase', '_blank');
}
</script>
