<!-- Кнопка меню карточки: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
<template>
  <component
    v-if="dropdown"
    :is="dropdown"
    v-bind="{ ...$attrs, ...props }"
    auto-open
  />
  <button
    v-else
    v-bind="{ onClick: $attrs.onClick }"
    :aria-label="t('open_menu')"
    :class="[$attrs.class, 'card-dropdown__trigger']"
    type="button"
    @click="mountDropdown"
  >
    <UiIcon
      name="dots-vertical"
      size="18"
    />
  </button>
</template>

<script setup lang="ts">
import type { Component } from 'vue';
import type { IVideoCard } from '../../../types';

defineOptions({ inheritAttrs: false });

const props = defineProps<{
  card: IVideoCard
  showWatchLater?: boolean
  showFavorites?: boolean
  showShare?: boolean
  showReport?: boolean
  showRemove?: boolean
}>();

const { t } = useI18n();

// Не LazyCardDropdown: async-обёртка на первом рендере отдаёт коммент-заглушку вместо элемента,
// колонка грида схлопывается и текст карточки успевает дёрнуться. Кладём уже загруженный компонент —
// подмена кнопки на меню происходит одним патчем.
const dropdown = shallowRef<Component | null>(null);

async function mountDropdown() {
  dropdown.value = (await import('./index.vue')).default;
}
</script>

<style lang="scss">
.card-dropdown__trigger {
  position: relative;

  &::after {
    @include area-point;
  }
}
</style>
