<!-- Подписки на плейлисты: сортировка «недавно обновлённые / A-Z», сетка карточек. Данные пока заглушка -->
<template>
  <div class="library-playlists _page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <UiSectionTitle
      :title="t('library.followed_playlists')"
      :count="items.length"
      class="library-playlists__title"
      icon="playlist"
    />

    <div class="library-playlists__sort">
      <UiBtn
        v-for="option in sortItems"
        :key="option.name"
        :theme="sort === option.name ? 'primary' : 'secondary'"
        @click="sort = option.name"
      >{{ option.title }}</UiBtn>
    </div>

    <GridPlaylists
      v-if="sortedItems.length > 0"
      :items="sortedItems"
      priority
      show-follow
    />

    <UiEmptyState
      v-else
      without-reset
    />
  </div>
</template>

<script setup lang="ts">
import { getLibraryPlaylistsStub } from '../../stubs/library-follows';
import type { IBreadcrumbItem } from '../../types';

const PlaylistsSort = {
  Updated: 'updated',
  Alphabet: 'alphabet',
} as const;

type PlaylistsSortValue = typeof PlaylistsSort[keyof typeof PlaylistsSort];

const { t } = useI18n();

const items = getLibraryPlaylistsStub();

/** Заглушка: страница показывает подписки, поэтому состояние подписки засеивается пулом. */
const { follows } = usePlaylistFollow();

const isSeeded = useState('playlist-follows-seeded', () => false);

if (!isSeeded.value) {
  follows.value = [ ...new Set([ ...follows.value, ...items.map(item => item.id) ]) ];
  isSeeded.value = true;
}

const sort = ref<PlaylistsSortValue>(PlaylistsSort.Updated);

const sortItems = computed(() => [
  { name: PlaylistsSort.Updated, title: t('library.sort_new_first') },
  { name: PlaylistsSort.Alphabet, title: t('library.sort_alphabet') },
]);

const sortedItems = computed(() => {
  const list = [ ...items ];

  return sort.value === PlaylistsSort.Alphabet
    ? list.sort((a, b) => a.name.localeCompare(b.name))
    : list.sort((a, b) => b.created - a.created);
});

useNoindex();

const { brandName } = useAppConfig();

useHead(() => ({
  title: `${t('library.followed_playlists')} — ${brandName}`,
}));

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('navigation.library')}`,
    to: '/library',
  },
  {
    name: `${t('library.followed_playlists')}`,
  },
] as IBreadcrumbItem[];
</script>

<style lang="scss">
.library-playlists__title {
  margin-bottom: 16px;
}

.library-playlists__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
</style>
