<template>
  <v-btn
    id="avatar-dropdown"
    v-bind="mergeProps(activatorProps)"
    v-if="showAvatarDropdown"
    data-testid="btn"
    rounded
    border="sm"
    class="pl-1 pr-3 ml-1"
    style="opacity: 1 !important"
    variant="plain"
    :append-icon="'keyboard_arrow_down'"
    @click="options.onProfileDropdown!(innerWidth - 16, 50)"
  >
    <v-img
      :src="userAvatar"
      width="32px"
      height="32px"
      rounded="circle"
      style="opacity: 1 !important"
    />
  </v-btn>
  <DemoAvatarDropdownMenu
    v-if="isDemo"
    @close="emit('close')"
  />
</template>

<script setup lang="ts">
import { useDemoStore } from '@/stores/demo.store';
import { useViewerStore } from '@/stores/viewer.store';
import { storeToRefs } from 'pinia';
import { computed, mergeProps } from 'vue';

interface Props {
  activatorProps?: Record<string, unknown>;
}

type Emits = {
  close: [void];
};

const emit = defineEmits<Emits>();

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

const { isDemo } = storeToRefs(useDemoStore());
const { options } = storeToRefs(useViewerStore());

const innerWidth = computed(() => window.innerWidth);

const showAvatarDropdown = computed(() => {
  return !!options.value.onProfileDropdown;
});

const userAvatar = computed(() => {
  const name = options.value.user?.name || 'Unknown User';
  return options.value.user?.avatarUrl || name[0];
});
</script>

<style lang="scss">
#avatar-dropdown {
  .v-icon {
    // --v-icon-size-multiplier: 1 !important;
    color: #92939e !important;
  }
  .v-btn__append {
    margin-inline-start: 4px !important;
  }
}
</style>
