import { View, Image, Button } from "@tarojs/components";
import './moment_item.scss'
import { MainColorType } from "@/context/themes/color";
import TimeTitleDesc from "@/_health/components/time_title_desc";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import isToday from 'dayjs/plugin/isToday';
import isTomorrow from 'dayjs/plugin/isTomorrow'
import isYesterday from 'dayjs/plugin/isYesterday'
import TargetProgress from "@/_health/components/target_progress";
import { rpxToPx } from "@/utils/tools";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import CoverList from "@/_health/components/cover_list";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { IconActive } from "@/components/basic/Icons";

dayjs.extend(relativeTime);
dayjs.extend(isToday);
dayjs.extend(isTomorrow);
dayjs.extend(isYesterday);


export default function MomentItem(props: { data: any }) {
    const { link, moment, user } = props.data

    const formatTime = (timestamp) => {
        const now = dayjs();
        const time = dayjs(timestamp);

        if (time.isToday()) {
            return time.format('HH:mm'); // 今天的时间
        }

        const diffInMinutes = now.diff(time, 'minute');

        if (diffInMinutes < 60) {
            return `${diffInMinutes} min ago`; // xx分钟之前
        } else {
            return time.format('YYYY-MM-DD'); // 显示完整日期
        }
    };

    const formatImages = (list) => {
        return list.map(obj => obj.url);
    }

    function goProfile() {
        jumpPage(`/_moment/pages/home?uid=${user.id}`)
    }

    function goDetail() {
        jumpPage(`/_health/pages/timeline_detail?disable_edit=1&window_id=${link.window_id}`)
    }

    return <View className="moment_item">
        <Image className="moment_avatar" src={user.avatar} mode="aspectFill" onClick={goProfile} />
        <View className="moment_detail" onClick={goDetail}>
            <View className="h34 bold" style={{ color: MainColorType.link, marginBottom: rpxToPx(6) }}>{user.nickname}</View>
            {
                (moment.title || moment.description) && <TimeTitleDesc time="" title={moment.title} desc={moment.description} />
            }
            <View style={{ height: rpxToPx(12) }} />
            {
                moment.media.length > 0 && <CoverList imgs={formatImages(moment.media)} count={moment.media.length} />
            }
            {
                link && link.ring && <View style={{ marginTop: rpxToPx(24) }}>
                    <TargetProgress
                        color={getThemeColor(link.window)}
                        showRing={true}
                        desc={link.ring.description}
                        og={link.status == 'OG'}
                        startTimestamp={link.ring.start_timestamp}
                        endTimerstamp={link.ring.end_timestamp ?? new Date().getTime()}
                    />
                </View>
            }
            {
                link && link.move && <View style={{ marginTop: rpxToPx(24) }}>
                    <TargetProgress
                        color={getThemeColor(link.window)}
                        showRing={false}
                        desc={link.move.description}
                        icon={
                            <IconActive color={MainColorType.active} width={rpxToPx(32)} />
                        }
                    />
                </View>
            }
            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: rpxToPx(24) }}>
                <View className="h26 g02">{formatTime(moment.timestamp)}</View>
                <View style={{ position: 'relative' }}>
                    <Button className="item_share" openType="share" onClick={() => { global.shareData = '9527'; console.log('sgareeeeeee') }}></Button>
                </View>
            </View>
        </View>
    </View>
}