<!-- Сетка карточек плейлистов, 2-4 колонки; попап шаринга — один на список -->
<template>
  <div class="grid-playlists">
    <CardPlaylist
      v-for="(item, index) in items"
      :key="`user-playlist-${index}`"
      :card="item"
      :top-playlists="topPlaylists"
      :no-actions="noActions"
      :show-follow="showFollow"
      :own="own"
      :priority="priority && index === 0"
      @share="onShare"
    />

    <slot/>

    <ShareMain
      v-model="isShareOpen"
      :url="shareUrl"
    >
      <template #card>
        <CardPlaylistMini
          v-if="shareCard"
          :card="shareCard"
        />
      </template>
    </ShareMain>
  </div>
</template>

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

defineProps<{
  items: IPlaylistCard[]
  topPlaylists?: boolean
  /** Скрыть меню карточки (три точки: share/report) — например у редакционных подборок */
  noActions?: boolean
  /** Кнопка подписки поверх обложки — список подписок в библиотеке */
  showFollow?: boolean
  /** Свои плейлисты: приватность значком у названия, в меню — правка и удаление */
  own?: boolean
  priority?: boolean
}>();

const { generateLink } = useGenerateLink();

const isShareOpen = ref(false);
const shareCard = ref<IPlaylistCard | null>(null);

const shareUrl = computed(() => shareCard.value
  ? generateLink(`/playlists/${shareCard.value.id}/${shareCard.value.firstVideoId}`)
  : '');

function onShare(card: IPlaylistCard) {
  shareCard.value = card;
  isShareOpen.value = true;
}
</script>

<style lang="scss">
.grid-playlists {
  display: grid;
  gap: 24px;

  @include from-br(xs) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include from-br(sm) {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
