<!-- Дропдаун-меню видео: смотреть позже, избранное, добавить в плейлист, поделиться, пожаловаться -->
<template>
  <UiDropdown
    ref="dropdownRef"
    right
    use-v-if
    v-bind="$attrs"
  >
    <template #trigger>
      <slot name="trigger">
        <button
          :aria-label="$t('open_menu')"
          class="card-dropdown__trigger"
          type="button"
        >
          <UiIcon
            name="dots-vertical"
            size="18"
          />
        </button>
      </slot>
    </template>
    <template #header>
      <CardVideoMini
        :card="card"
        class="card-dropdown__preview _to-md"
      />
    </template>
    <template #items="className">
      <button
        v-if="showWatchLater"
        :class="className"
        type="button"
        @click="toggleWatchLater(card.guid, card.title)"
      >
        <UiIcon
          name="clock"
          size="20"
        />
        {{ watchLaterLabel }}
      </button>
      <button
        v-if="showFavorites"
        :class="className"
        type="button"
        @click="toggleFavorite(card.guid, card.title)"
      >
        <UiIcon
          name="heart-stroke"
          size="20"
        />
        {{ favoritesLabel }}
      </button>
      <button
        :class="className"
        type="button"
        @click="onAddPlaylist"
      >
        <UiIcon
          name="playlist"
          size="20"
        />
        {{ $t('add_to_playlist') }}
      </button>
      <button
        v-if="showShare"
        :class="className"
        type="button"
        @click="onShare"
      >
        <UiIcon
          name="share"
          size="20"
        />
        {{ $t('share') }}
      </button>
      <button
        v-if="showReport"
        :class="className"
        type="button"
        @click="onReport"
      >
        <UiIcon
          name="flag"
          size="20"
        />
        {{ $t('video_submenu.report') }}
      </button>
      <button
        v-if="showRemove"
        :class="className"
        type="button"
        @click="emit('remove')"
      >
        <UiIcon
          name="trash-bin"
          size="20"
        />
        {{ $t('remove_video') }}
      </button>
    </template>
  </UiDropdown>
</template>

<script setup lang="ts">
import type { IVideoCard } from '../../../types';
import { AuthorizationApiService } from '../../../services/api/authorization.service';

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

const emit = defineEmits<{
  (e: 'share'): void
  (e: 'remove'): void
}>();

const { t } = useI18n();

const { isAuthorized } = useUser(AuthorizationApiService);
const { openReportPopup } = useReportPopup();
const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();

const favorite = computed(() => isFavorite(props.card.guid));
const later = computed(() => isWatchLater(props.card.guid));

// Тем же кликом, что переключает коллекцию, меню закрывается. Если менять надпись сразу, она
// дёргается прямо во время анимации закрытия, поэтому в меню живёт снапшот состояния — он
// догоняет реальное только к следующему открытию, когда пункт всё равно перерисовывается с нуля.
const shownFavorite = ref(favorite.value);
const shownLater = ref(later.value);

const favoritesLabel = computed(() => shownFavorite.value
  ? t('video_actions.remove_favorites')
  : t('video_actions.add_favorites'));

const watchLaterLabel = computed(() => shownLater.value
  ? t('video_actions.remove_watch_later')
  : t('video_actions.add_watch_later'));

const dropdownRef = ref();

watch(() => dropdownRef.value?.open, (isOpen) => {
  if (!isOpen) return;
  shownFavorite.value = favorite.value;
  shownLater.value = later.value;
});

function openDropdown() {
  dropdownRef.value?.openDropdown();
}

onMounted(() => {
  if (props.autoOpen) openDropdown();
});

function onAddPlaylist() {
  usePlaylistAdd().openPlaylistAdd(isAuthorized, props.card, openDropdown);
}

function onShare() {
  emit('share');
}

function onReport() {
  openReportPopup(props.card, openDropdown);
}

defineExpose({ openDropdown });

</script>

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

  &::after {
    @include area-point;
  }
}

.card-dropdown__preview {
  padding: 16px 32px 16px 16px;
  border-bottom: 1px solid $video-card-dropdown-border;
}
</style>
