<script lang="ts" setup>
import { AiAnswerProvideKey } from '../../type'
import CollectionBtn from './components/CollectionBtn.vue'
import LikeBtn from './components/LikeBtn.vue'
import UnLikeBtn from './components/UnLike.vue'
import CopyBtn from './components/CopyBtn.vue'
import ReloadBtn from './components/ReloadBtn.vue'

const props = withDefaults(defineProps<Props>(), {
  recordId: '',
  streamAnswer: '',
  isLastAnswer: false,
})

const emits = defineEmits(['onClickReload'])

interface Props {
  recordId: string
  streamAnswer: string
  isLastAnswer: boolean
}

const likeBtnRef = ref()
const unlikeBtnRef = ref()

const animated = inject(AiAnswerProvideKey)?.animated

function onAddUnLike() {
  likeBtnRef.value.toggleFalse()
}

function onAddLike() {
  unlikeBtnRef.value.toggleFalse()
}

function onClickReload() {
  emits('onClickReload')
}
</script>

<template>
  <div class="opetare-bar-wrap" :class="{ 'animate__animated animate__fadeIn': animated }">
    <LikeBtn ref="likeBtnRef" :record-id="recordId" @on-add-like="onAddLike" />
    <span class="line">|</span>
    <UnLikeBtn ref="unlikeBtnRef" :record-id="recordId" @on-add-un-like="onAddUnLike" />
    <span class="line">|</span>
    <CopyBtn :stream-answer="props.streamAnswer" />
    <span class="line">|</span>
    <CollectionBtn :record-id="props.recordId" />
    <span v-if="props.isLastAnswer" class="line">|</span>
    <ReloadBtn v-if="props.isLastAnswer" :record-id="props.recordId" @on-click-reload="onClickReload" />
  </div>
</template>

<style lang="scss" scoped>
.opetare-bar-wrap {
  display: flex;
  align-items: center;
  margin-top: 8px;
  .line {
    font-size: 12px;
    color: rgba(233, 235, 241, 1);
    transform: translateY(-1px);
    margin: 0 8px;
  }
  .collection-btn {
    width: 22px;
    height: 22px;
  }
}
</style>
