<template>
	<div class="overflow-hidden">
		<van-popover v-if="hasPermission" placement="top" v-model:show="showDelete" theme="dark" trigger="manual">
			<div class="overflow-hidden bg-[#4C4C4E] px-4 py-2 text-xs" @click="tryDeleteComent">
				{{ $t('buttons.delete') }}
			</div>
			<template #reference>
				<div ref="commentRef" class="bg-[#F7F7F7] py-0.5 px-2" @click="emit('startComment')">
					<span class="text-sm text-[#6085B1]">{{ comment.nickname }}</span>
					<span v-if="showReply" class="mx-1 text-sm">{{ $t('buttons.reply') }}</span>
					<span v-if="showReply" class="text-sm text-[#6085B1]">{{
            comment.replyNickname
          }}</span>
					<span class="break-all text-sm">：{{ comment.content }}</span>
				</div>
			</template>
		</van-popover>
		<div v-else class="bg-[#F7F7F7] py-0.5 px-2" @click="emit('startComment')">
			<span class="text-sm text-[#6085B1]">{{ comment.nickname }}</span>
			<span v-if="showReply" class="mx-1 text-sm">{{ $t('buttons.reply') }}</span>
			<span v-if="showReply" class="text-sm text-[#6085B1]">{{
        comment.replyNickname
      }}</span>
			<span class="break-all text-sm">：{{ comment.content }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	import useUserStore from '@/store/modules/user'
	import { Comments } from '@/types/moment'
	import { onLongPress } from '@vueuse/core'

	type ComentItemProps = {
		comment : Comments
		momentsUserID : String
	}
	const emit = defineEmits(['deleteComent', 'startComment'])
	const props = defineProps<ComentItemProps>()

	const commentRef = ref()
	const showDelete = ref(false)
	const userStore = useUserStore()

	const hasPermission = computed(
		() =>
			props.comment.userID === userStore.selfInfo.userID ||
			props.momentsUserID === userStore.selfInfo.userID,
	)
	const showReply = computed(() => props.comment.replyUserID !== '')

	const runDeleteComent = () => {
		if (
			props.comment.userID === userStore.selfInfo.userID ||
			props.momentsUserID === userStore.selfInfo.userID
		) {
			showDelete.value = true
		}
	}

	onLongPress(commentRef, runDeleteComent, { modifiers: { prevent: true } })

	const tryDeleteComent = () => {
		emit('deleteComent', props.comment.commentID)
		showDelete.value = false
	}
</script>

<style lang="scss" scoped></style>