<!-- Кнопка подписки: «Follow» → «Following», при наведении на подписку становится красной «Unfollow». На мобиле только иконка. Отписка сама показывает снекбар с undo -->
<template>
  <button
    :aria-label="ariaLabel"
    :class="[`--${size}`, { '--following': following }]"
    class="ui-follow-btn"
    type="button"
    @click="onClick"
  >
    <UiIcon
      :name="following ? 'check' : 'plus'"
      class="ui-follow-btn__icon"
      size="16"
    />
    <span class="ui-follow-btn__label">{{ following ? t('library.following_state') : t('follow') }}</span>

    <template v-if="following">
      <UiIcon
        class="ui-follow-btn__icon-hover"
        name="minus"
        size="16"
      />
      <span class="ui-follow-btn__label-hover">{{ t('unfollow') }}</span>
    </template>
  </button>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    /** Имя модели / канала / категории — уходит в aria-label, чтобы кнопки в списке различались на слух */
    name: string
    following?: boolean
    /** `s` — под размеры `UiBtn size="s"` в шапках карточек */
    size?: 'm' | 's'
  }>(),
  {
    size: 'm',
  }
);

const emit = defineEmits<{
  (eventName: 'toggle'): void,
}>();

const { t } = useI18n();
const { show } = useSnackbar();

/**
 * Снекбар с undo вшит в кнопку: отменять хочется только отписку, и текст у неё всегда
 * один и тот же — раскладывать эту механику по каждому вызову смысла нет.
 * Само состояние остаётся у родителя, undo просто переключает подписку обратно.
 */
function onClick() {
  const wasFollowing = props.following;

  emit('toggle');

  if (!wasFollowing) return;

  show('unfollowed', {
    icon: 'minus',
    highlight: props.name,
    onAction: () => emit('toggle'),
  });
}

/**
 * Доступное имя повторяет видимую подпись (Following / Follow), а не действие: иначе
 * ломается WCAG «Label in Name», ведь на мобиле подписи нет вообще.
 */
const ariaLabel = computed(() => props.following
  ? t('following_aria', { name: props.name })
  : t('follow_aria', { name: props.name }));
</script>

<style lang="scss">
.ui-follow-btn {
  @include font-sm;

  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-weight: 500;
  border-radius: $radius-md;
  background-color: $follow-btn-bg;
  border: 1px solid $follow-btn-border;
  color: $follow-btn-text;

  @include from-br(sm) {
    width: 124px;
    height: auto;
    padding: 8px 16px;
  }

  @include hover(background-color, border-color) {
    background-color: $follow-btn-bg--hover;
    border-color: $follow-btn-border--hover;
  }
}

/* Размер под соседние `UiBtn size="s"`: без фиксированной ширины — в шапке кнопки жмутся по контенту */
.ui-follow-btn.--s {
  width: 32px;
  height: 32px;
  border-radius: $radius-lg;

  @include from-br(sm) {
    width: max-content;
    height: auto;
    min-height: 32px;
    padding: 6px 12px;
  }
}

.ui-follow-btn.--following {
  background-color: $follow-btn-following-bg;
  border-color: $follow-btn-following-border;
  color: $follow-btn-following-text;

  @include hover(background-color, border-color, color) {
    background-color: $follow-btn-following-bg--hover;
    border-color: $follow-btn-following-border--hover;
    color: $follow-btn-following-text--hover;
  }
}

.ui-follow-btn__label {
  display: none;

  @include from-br(sm) {
    display: block;
  }
}

/* Подмена подписи и иконки — чистым CSS: на тач-устройствах ховера нет, а JS-стейт там «залипал» бы после тапа */
.ui-follow-btn__icon-hover,
.ui-follow-btn__label-hover {
  display: none;
}

@media (hover: hover) {
  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__icon,
  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__label {
    display: none;
  }

  .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__icon-hover {
    display: block;
  }

  @include from-br(sm) {
    .ui-follow-btn.--following:is(:hover, :focus-visible) .ui-follow-btn__label-hover {
      display: block;
    }
  }
}
</style>
