<template>
  <v-menu>
    <template #activator="{ props }">
      <v-btn v-bind="mergeProps(btnProps, props)" append-icon="arrow_drop_down" variant="text">
        <span>{{ text }}</span>
      </v-btn>
    </template>
    <v-card>
      <v-list>
        <v-list-item @click="modelValue = SharePermission.Viewer">
          <span>{{ viewer }}</span>
        </v-list-item>
        <v-list-item @click="modelValue = SharePermission.Editor">
          <span>{{ editor }}</span>
        </v-list-item>
        <v-list-item @click="modelValue = SharePermission.NoAccess">
          <span>{{ noAccess }}</span>
        </v-list-item>
      </v-list>
    </v-card>
  </v-menu>
</template>

<script setup lang="ts">
import { computed, mergeProps } from 'vue';
import { useI18n } from 'vue-i18n';
import { SharePermission } from '@3cr/viewer-types-ts';

interface Props {
  btnProps?: Record<string, any>;
}

withDefaults(defineProps<Props>(), {
  btnProps: () => ({})
});

const { t } = useI18n();

const modelValue = defineModel<SharePermission>({ default: SharePermission.NoAccess });

const noAccess = computed(() => t('enums.sharePermission.noAccess'));
const viewer = computed(() => t('enums.sharePermission.viewer'));
const editor = computed(() => t('enums.sharePermission.editor'));
const owner = computed(() => t('enums.sharePermission.owner'));

const text = computed(() => {
  switch (modelValue.value) {
    case SharePermission.NoAccess:
      return noAccess.value;
    case SharePermission.Viewer:
      return viewer.value;
    case SharePermission.Editor:
      return editor.value;
    case SharePermission.Owner:
      return owner.value;
  }
});
</script>
