<!-- Чип канала: аватар, название, кнопка подписки -->
<template>
  <div class="player-channel">
    <NuxtLink
      :to="link"
      class="player-channel__avatar-link"
    >
      <UiImg
        v-if="avatar"
        :src="avatar"
        :alt="$t('channel_logo')"
        class="player-channel__avatar"
        sizes="36px"
        width="36"
        height="32"
      />
      <span
        v-else
        class="player-channel__initials"
      >{{ initials }}</span>
    </NuxtLink>
    <NuxtLink
      :to="link"
      class="player-channel__name"
    >{{ name }}</NuxtLink>
    <button
      v-if="featureFlags.FeatureFollowEnabled"
      type="button"
      class="player-channel__subscribe"
      @click="onSubscribeClick"
    >
      {{ $t('subscribe') }}
    </button>
    <span
      v-if="subscribersCount"
      class="player-channel__count"
    >{{ $n(subscribersCount, 'compact') }}</span>
  </div>
</template>

<script setup lang="ts">
import { convertString, AuthSteps } from '../../runtime';
import { AuthorizationApiService } from '../../services/api/authorization.service';
import { getNameInitials } from '../../utils/player-channel/get-name-initials';

const props = defineProps<{
  name: string
  avatar?: string
  subscribersCount?: number
}>();

const featureFlags = useRuntimeConfig().public.featureFlags;
const { generateLink } = useGenerateLink();

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

const link = computed(() => generateLink(`/channels/${convertString().toSlug(props.name)}`));

const initials = computed(() => getNameInitials(props.name));

function onSubscribeClick() {
  if (useUser(AuthorizationApiService).isAuthorized.value) {
    emit('subscribe');
  } else {
    useAuthPopup().openAuthPopup(AuthSteps.Login, 'register_first');
  }
}
</script>

<style lang="scss">
.player-channel {
  display: flex;
  align-items: center;
  column-gap: 8px;
  height: var(--chips-height);
  padding-right: 8px;
  background-color: $video-channel-bg;
  border-radius: $radius;
  overflow: hidden;
  flex-shrink: 0;
}

.player-channel__avatar-link {
  flex-shrink: 0;
  height: 100%;
}

.player-channel__avatar {
  width: 36px;
  height: 100%;
  object-fit: cover;
  border-radius: 0 $radius-small $radius-small 0;
}

.player-channel__initials {
  @include font-3xs;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  border-radius: 0 $radius-small $radius-small 0;
  background: linear-gradient(to bottom right in oklab, $video-channel-initials-gradient-from, $video-channel-initials-gradient-to);
  color: $video-channel-initials-text;
  font-weight: 700;
}

.player-channel__name {
  @include font-sm;

  color: $video-channel-name;
  transition: color var(--transition);
  white-space: nowrap;

  &:hover {
    color: $video-channel-name--hover;
  }
}

.player-channel__subscribe {
  @include font-xs;

  flex-shrink: 0;
  color: $video-channel-subscribe-text;
  padding: 0 12px;
  height: 100%;
  text-transform: capitalize;
  font-weight: 500;
  background-color: $video-channel-subscribe-bg;
  border-radius: $radius-md;

  @include hover(background-color) {
    background-color: $video-channel-subscribe-bg--hover;
  }
}

.player-channel__count {
  @include font-xs;

  color: $video-channel-count;
  white-space: nowrap;
}
</style>
