<template>
  <q-menu anchor="bottom right" self="top right">
    <q-list style="min-width: 200px">
      <q-item-label header class="q-pb-xs">Permissões</q-item-label>
      <q-item v-for="level in availableLevels" :key="level.key" v-ripple="!level.computed" :clickable="!level.computed" @click="toggle(level.bit)">
        <q-item-section side><q-checkbox :model-value="has(level.bit)" :disable="level.computed" dense @update:model-value="toggle(level.bit)" @click.stop /></q-item-section>
        <q-item-section><q-item-label :class="{ 'text-grey-7': level.computed }">{{ level.label }}</q-item-label></q-item-section>
        <q-tooltip v-if="level.computed">{{ level.computedHint }}</q-tooltip>
      </q-item>
    </q-list>
  </q-menu>
</template>
<script setup>
import { computed } from "vue";
import { PERMISSION_LEVELS, applyComputedLevels } from "src/pages/permissions/permission_menus";
const { bits, availableBits } = defineProps({ bits: { type: Number, default: 0 }, availableBits: { type: Number, default: 511 } });
const emit = defineEmits(["update:bits"]);
const availableLevels = computed(() => PERMISSION_LEVELS.filter((level) => (availableBits & level.bit) !== 0));
const has = (bit) => (bits & bit) !== 0;
const toggle = (bit) => {
  if (PERMISSION_LEVELS.find((level) => level.bit === bit)?.computed) return;
  emit("update:bits", applyComputedLevels(has(bit) ? bits & ~bit : bits | bit));
};
</script>
