<template>
  <div
    class="custom-icon-container"
    :class="{ 'disabled': disabled }"
    @click="handleCoHost"
  >
    <span
      v-if="applicants?.length > 0"
      class="unread-count"
    >{{ applicants?.length }}</span>
    <span class="custom-icon co-host-icon" />
    <span class="custom-text co-host-text">{{ t('CoHost') }}</span>
  </div>
  <CoHostPanel v-model:visible="coHostPanelVisible" class="co-host-panel" />
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { TOAST_TYPE, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
import { CoHostPanel, useLiveState, useCoHostState, useLiveSeatState } from 'tuikit-atomicx-vue3';
const { currentLive } = useLiveState();
const {
  applicants,
} = useCoHostState();
const { seatList } = useLiveSeatState();
// todo lxiin修改 roomId 为 liveId
const isInCoGuest = computed(() =>
  seatList.value.filter((item) => item.userInfo?.roomId === currentLive.value?.liveId).length === seatList.value.filter((item) => item.userInfo?.userId).length
  && seatList.value.filter((item) => item.userInfo?.userId).length > 1
);
const disabled = computed(() => !currentLive.value?.liveId || isInCoGuest.value);

const { t } = useUIKit();

const coHostPanelVisible = ref(false);

const handleCoHost = () => {
  if (disabled.value) {
    const message = !currentLive.value?.liveId ? t('Cannot use co-host before live starts') : t('Cannot co-host with other hosts while audience co-hosting is active');
    TUIToast({ type: TOAST_TYPE.ERROR, message });
    return;
  }
  coHostPanelVisible.value = true;
};

</script>

<style lang="scss" scoped>
@import '../style/index.scss';

.custom-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  height: 56px;
  cursor: pointer;
  color: $text-color1;
  border-radius: 12px;
  position: relative;

  .unread-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--text-color-error);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .custom-icon {
    @include icon-size-24;
  }
  .custom-text {
    @include text-size-12;
  }

  &:hover {
    box-shadow: 0 0 10px 0 var(--bg-color-mask);
    .custom-icon {
      background-color: $icon-hover-color;
    }
    .custom-text {
      color: $icon-hover-color;
    }
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: $text-color3;
    .custom-icon {
      background-color: $text-color3;
      cursor: not-allowed;
    }
    .custom-text {
      color: $text-color3;
    }
  }
}

.co-host-icon {
  mask-image: url('../icons/co-host-icon.svg');
}
</style>
