<template>
  <q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" round>
    <q-menu v-if="context" context-menu>
      <q-btn v-close-popup label="Verknüpfung entfernen" @click="deleteShortcut" />
    </q-menu>
  </q-btn>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from '@flaschengeist/typings';

export default defineComponent({
  name: 'ShortcutLink',
  props: {
    shortcut: {
      required: true,
      type: Object as PropType<FG_Plugin.Shortcut | FG_Plugin.MenuLink>,
    },
    context: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    deleteShortcut: (val: FG_Plugin.MenuLink | FG_Plugin.Shortcut) => val.link,
  },
  setup(props, { emit }) {
    const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
    function deleteShortcut() {
      emit('deleteShortcut', props.shortcut);
    }
    return { isGranted, deleteShortcut };
  },
});
</script>
