<!-- Список подписок «Библиотеки»: сортировка, блоки лент -->
<template>
  <div class="library-follows">
    <UiSectionTitle
      :title="title"
      :count="items.length"
      :icon="icon"
      class="library-follows__title"
    />

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

    <div
      v-if="sortedItems.length > 0"
      class="library-follows__list"
    >
      <LibraryFeed
        v-for="(item, index) in sortedItems"
        :key="item.guid"
        :item="item"
        :following="isFollowing(item)"
        :priority="index === 0"
        :without-avatar="withoutAvatar"
        @toggle-follow="onToggleFollow"
      />
    </div>

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

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

const LibrarySort = {
  New: 'new',
  Alphabet: 'alphabet',
} as const;

type LibrarySortValue = typeof LibrarySort[keyof typeof LibrarySort];

const props = defineProps<{
  items: ILibraryFeedItem[]
  title: string
  icon: string
  /** Список без аватарок — у категорий их нет (и инициалы вместо них тоже не рисуем) */
  withoutAvatar?: boolean
}>();

const { t } = useI18n();

const sort = ref<LibrarySortValue>(LibrarySort.New);

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

/**
 * «Сначала новые» — по числу непросмотренных новинок, а не по дате обновления: подписка
 * с тремя новыми роликами важнее свежей, но с одним. Порядок равных сохраняет сортировка.
 */
const sortedItems = computed(() => {
  const items = [...props.items];

  return sort.value === LibrarySort.Alphabet
    ? items.sort((a, b) => a.title.localeCompare(b.title))
    : items.sort((a, b) => b.newCount - a.newCount);
});

const unfollowed = ref<string[]>([]);

function isFollowing(item: ILibraryFeedItem) {
  return !unfollowed.value.includes(item.guid);
}

function follow(guid: string) {
  unfollowed.value = unfollowed.value.filter(item => item !== guid);
}

function unfollow(guid: string) {
  unfollowed.value = [...unfollowed.value, guid];
}

/** Заглушка: подписка живёт в локальном стейте, API ещё нет. Снекбар с undo рисует сама кнопка. */
function onToggleFollow(item: ILibraryFeedItem) {
  if (isFollowing(item)) {
    unfollow(item.guid);
  } else {
    follow(item.guid);
  }
}
</script>

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

.library-follows__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.library-follows__list {
  display: grid;
  row-gap: 40px;

  @include from-br(sm) {
    row-gap: 24px;
  }
}
</style>
