<template>
	<div class="page_container !bg-white">
		<van-nav-bar :title="''" placeholder fixed left-arrow :clickable="false" :border="false"
			@click-left="router.back()">
			<template #left>
				<img class="h-5 w-3" :src="arrows" alt="" />
			</template>
		</van-nav-bar>
		<div class="overflow-hidden overflow-y-auto" ref="el">
			<div class="relative">
				<img class="mt-[-46px]" :src="background" alt="" />
				<Avatar class="!absolute bottom-[-18px] right-4" :size="48" :src="user.faceURL" :desc="user.nickname" />
				<div class="!absolute right-[14px] bottom-[-58px] flex h-[48px] items-center justify-center nickname">
					{{ user.nickname }}
				</div>
			</div>
			<div v-for="group in groups" class="mt-16">
				<div v-for="(item, i) in group.objects" class="flex items-start" @click="toDetails(item.workMomentID)">
					<div class="flex w-[60px] justify-center font-semibold">
						<span v-if="i === 0">{{ group.date }}</span>
					</div>
					<div v-if="item.content.metas.length > 0" class="mb-2 flex flex-1 flex-row px-3">
						<img class="h-[90px] w-[90px]" :src="item.content.metas[0].thumb" />
						<view class="ml-2 flex h-[90px] flex-1 flex-col items-start justify-between">
							<span class="w-full overflow-hidden break-all line-clamp-3">{{
                item.content.text
              }}</span>
							<span class="text-sm text-sub-text">{{
                $t('momentsTips.total', { total: item.content.metas.length })
              }}</span>
						</view>
					</div>
					<div v-else class="mb-2 flex flex-1 flex-row overflow-hidden px-3">
						<div class="w-full bg-[#E8EAEF] px-2 py-3">
							<span class="w-full overflow-hidden break-all line-clamp-2">{{
                item.content.text
              }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="h-10"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { fetchUserMoments } from '@/api/moments'
	import Avatar from '@/components/Avatar/index.vue'
	import arrows from '@/assets/images/moments/back.png'
	import background from '@/assets/images/moments/background.png'
	import { WorkMoments } from '@/types/moment'
	import { useInfiniteScroll } from '@vueuse/core'
	import { closeToast, showLoadingToast } from 'vant'
	import dayjs from 'dayjs'

	type Source = {
		workMoments : WorkMoments[]
		loading : boolean
		hasMore : boolean
		current : number
	}

	const el = ref<HTMLElement | null>(null)
	const user = reactive({
		userID: '',
		nickname: '',
		faceURL: '',
	})
	const { t } = useI18n()
	const router = useRouter()

	onBeforeMount(() => {
		const state = history.state
		user.userID = state.userID
		user.nickname = state.nickname
		user.faceURL = state.faceURL
	})

	onMounted(() => {
		fetchData()
	})

	useInfiniteScroll(
		el,
		() => {
			fetchData()
		},
		{ distance: 50 },
	)

	const source = reactive<Source>({
		workMoments: [],
		loading: false,
		hasMore: true,
		current: 1,
	})

	const groups = computed(() => {
		const groupsMap = new Map()
		const currentDate = dayjs().format('YYYY-MM-DD')
		source.workMoments.forEach((obj) => {
			const objDate = dayjs.unix(obj.createTime / 1000)

			if (objDate.format('YYYY-MM-DD') === currentDate) {
				const todayKey = t('date.today')
				if (!groupsMap.has(todayKey)) {
					groupsMap.set(todayKey, [])
				}
				groupsMap.get(todayKey).push(obj)
			} else if (objDate.add(1, 'day').format('YYYY-MM-DD') === currentDate) {
				const yesterdayKey = t('date.yesterday')
				if (!groupsMap.has(yesterdayKey)) {
					groupsMap.set(yesterdayKey, [])
				}
				groupsMap.get(yesterdayKey).push(obj)
			} else {
				const otherKey = objDate.format('MM-DD')
				if (!groupsMap.has(otherKey)) {
					groupsMap.set(otherKey, [])
				}
				groupsMap.get(otherKey).push(obj)
			}
		})
		return Array.from(groupsMap, ([date, objects]) => ({
			date,
			objects,
		}))
	})

	const fetchData = async () => {
		console.log('fetchData')
		if (!source.hasMore || source.loading) return
		source.loading = true
		showLoadingToast({
			message: t('loading'),
			forbidClick: true,
			duration: 0,
		})
		const { data } = await fetchUserMoments(source.current, user.userID + '')
		source.workMoments = [...source.workMoments, ...(data.workMoments ?? [])]
		source.current++
		source.hasMore = data.workMoments?.length === 20
		source.loading = false
		closeToast()
	}

	const toDetails = (workMomentID : string) => {
		router.push({
			path: '/momentsDetails',
			query: {
				workMomentID,
			},
		})
	}
</script>

<style scoped lang="scss">
	:deep(.van-nav-bar) {
		background-image: url(@/assets/images/moments/background.png);
		background-position: top;
		background-size: cover;
	}

	.nickname {
		min-width: 48rpx;
		text-align: center;
	}
</style>