<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { inject } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus'
import { _checkImgUrl, _formatNumber } from '@/utils/index'
import { useClick } from '@/utils/hooks/useClick'

const vClick = useClick()
const props = defineProps({
  item: { type: Object, required: true },
  isMy: { type: Boolean, default: false },
})

const emit = defineEmits<{ 'update:item': [unknown] }>()

const position = inject<{ uniqueId: string; index: number }>('position')

type VideoItem = {
  aweme_id?: string
  author?: { avatar_168x168?: { url_list?: string[] } }
  isAttention?: boolean
  isLoved?: boolean
  isCollect?: boolean
  statistics: {
    digg_count: number
    comment_count: number
    collect_count: number
    share_count: number
  }
}

function patch(partial: Partial<VideoItem>) {
  const next = { ...(props.item as VideoItem), ...partial }
  emit('update:item', next)
  if (position) {
    bus.emit(EVENT_KEY.UPDATE_ITEM, { position, item: next })
  }
}

function loved() {
  const item = props.item as VideoItem
  const nextLoved = !item.isLoved
  patch({
    isLoved: nextLoved,
    statistics: {
      ...item.statistics,
      digg_count: item.statistics.digg_count + (nextLoved ? 1 : -1),
    },
  })
}

function collected() {
  const item = props.item as VideoItem
  const next = !item.isCollect
  patch({
    isCollect: next,
    statistics: {
      ...item.statistics,
      collect_count: item.statistics.collect_count + (next ? 1 : -1),
    },
  })
}

function attention(e: Event) {
  const el = e.currentTarget as HTMLElement
  el.classList.add('attention')
  setTimeout(() => patch({ isAttention: true }), 1000)
}

function showComments() {
  bus.emit(EVENT_KEY.OPEN_COMMENTS, (props.item as VideoItem).aweme_id)
}

function goUser() {
  bus.emit(EVENT_KEY.GO_USERINFO)
}

function showShare() {
  bus.emit(EVENT_KEY.SHOW_SHARE)
}

const item = props.item as VideoItem
</script>

<template>
  <div class="toolbar" @click.stop>
    <div class="avatar-ctn">
      <img
        class="avatar"
        :src="_checkImgUrl(item.author?.avatar_168x168?.url_list?.[0])"
        alt=""
        v-click.stop="goUser"
      />
      <!-- <transition name="fade">
        <div v-if="!item.isAttention" class="options" @click.stop="attention">
          <img class="no" src="@/assets/img/icon/add-light.png" alt="" />
          <img class="yes" src="@/assets/img/icon/ok-red.png" alt="" />
        </div>
      </transition> -->
    </div>
    <div class="love" v-click.stop="loved">
      <div>
        <img v-if="!item.isLoved" src="@/assets/img/icon/love.svg" class="action-icon" alt="" />
        <img v-else src="@/assets/img/icon/loved.svg" class="action-icon" alt="" />
      </div>
      <span>{{ _formatNumber(item.statistics.digg_count) }}</span>
    </div>
    <div class="message" v-click.stop="showComments">
      <Icon icon="mage:message-dots-round-fill" class="icon" />
      <span>{{ _formatNumber(item.statistics.comment_count) }}</span>
    </div>
    <div class="message" v-click.stop="collected">
      <Icon
        icon="ic:round-star"
        class="icon"
        :style="{ color: item.isCollect ? 'rgb(252, 179, 3)' : 'white' }"
      />
      <span>{{ _formatNumber(item.statistics.collect_count) }}</span>
    </div>
    <div v-if="!isMy" class="share" v-click.stop="showShare">
      <img src="@/assets/img/icon/share-white-full.png" class="action-icon" alt="" />
      <span>{{ _formatNumber(item.statistics.share_count) }}</span>
    </div>
    <div v-else class="share" v-click.stop="showShare">
      <Icon icon="ri:more-line" class="icon" />
    </div>
  </div>
</template>

<style scoped lang="less">
.toolbar {
  position: absolute;
  bottom: var(--footer-safe-bottom, 100rem);
  right: 10rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  z-index: 4;

  .avatar-ctn {
    position: relative;
    margin-bottom: 20rem;

    .avatar {
      width: 45rem;
      height: 45rem;
      border: 3rem solid white;
      border-radius: 50%;
      cursor: pointer;
      object-fit: cover;
    }

    .options {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5rem;
      margin: auto;
      background: #fe2c55;
      width: 18rem;
      height: 18rem;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      img {
        position: absolute;
        width: 14rem;
        height: 14rem;
        transition: all 0.3s;
      }

      .yes {
        opacity: 0;
        transform: rotate(-180deg);
      }

      &.attention {
        background: white;

        .no {
          opacity: 0;
          transform: rotate(180deg);
        }

        .yes {
          opacity: 1;
          transform: rotate(0deg);
        }
      }
    }
  }

  .love,
  .message,
  .share {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    user-select: none;

    .action-icon {
      width: 35rem;
      height: 35rem;
      pointer-events: none;
    }

    .icon {
      font-size: 40rem;
    }

    span {
      font-size: 12rem;
      margin-top: 4rem;
    }
  }
}
</style>
