import TargetProgress from "@/_health/components/target_progress";
import TimeTitleDesc from "@/_health/components/time_title_desc";
import TimelineDate from "@/_health/components/timeline_date";
import { IconActive } from "@/components/basic/Icons";
import { MainColorType } from "@/context/themes/color";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import JournalCover from "@/features/journal/components/journal_cover";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { rpxToPx } from "@/utils/tools";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import dayjs from "dayjs";
import './recent_item.scss'

export default function RecentItem(props: { data: any, index: number }) {
    const { time, moment, link } = props.data

    function historyMonth(index) {
        var showDate = time.is_start_year ? true : false;
        var dateStr = global.language == 'en' ? dayjs(time.timestamp).format('YYYY') : dayjs(time.timestamp).format('YYYY年')
        if (index == 0) {
            var now = global.language == 'en' ? dayjs().format('YYYY') : dayjs().format('YYYY年')
            if (dateStr == now) {
                showDate = false
            }
        }
        if (showDate) {
            return <View className="history_year_month h42 bold" style={{ marginBottom: index==0?rpxToPx(60):0 }}>{dateStr}</View>
        }
        return <View />
    }

    function medias() {
        var pics = moment.media.map(obj => obj.url);
        return <JournalCover imgs={pics} />
    }

    function goDetail() {
        if (link.scenario == 'MOVE') {
            jumpPage('/_health/pages/move_detail?id=' + link.move.id)
            return;
        }
        jumpPage(`/_health/pages/timeline_detail?source=home&window_id=${link.window_id}&event_id=${link.event_id}`)
    }

    const hasImg = moment && moment.media.length > 0
    var hasText = moment && (moment.title || moment.description)
    if (hasText == undefined) {
        hasText = false
    }

    const spaceY = rpxToPx(12)

    return <View>
        {
            historyMonth(props.index)
        }
        <View className="recent_item1" style={{ paddingTop: time.is_start_day ? rpxToPx(60) : spaceY }} onClick={goDetail}>
            <TimelineDate timestamp={time.timestamp} pre_timestamp={0} isJournal={false} hideDate={!time.is_start_day} />
            <View className="history_content" style={{ paddingTop: rpxToPx(0) }}>
                <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(0), flex: 1 }}>
                    {
                        hasImg && medias()
                    }
                    {
                        hasText && <View style={{
                            display: 'flex',
                            flex: 1,
                            flexShrink: 0,
                            flexDirection: 'column',
                            backgroundColor: moment.media.length > 0 ? 'transparent' : '#fafafa',
                            paddingLeft: moment.media.length > 0 ? 0 : rpxToPx(20),
                            paddingRight: rpxToPx(20),
                            paddingTop: hasImg ? rpxToPx(12) : rpxToPx(12),
                            paddingBottom: rpxToPx(12)
                        }}>
                            <TimeTitleDesc
                                className={'line2'}
                                time=''
                                title={moment.title}
                                desc={moment.description} />
                        </View>
                    }

                </View>
                {
                    link && link.ring && <View style={{ marginTop: (hasImg || hasText) ? spaceY : 0 }}>
                        <TargetProgress
                            color={getThemeColor(link.window)}
                            showRing={true}
                            desc={link.ring.description}
                            time_desc={link.ring.time_desc}
                            og={link.status == 'OG'}
                            startTimestamp={link.ring.start_timestamp}
                            endTimerstamp={link.ring.end_timestamp ?? new Date().getTime()}
                        />
                    </View>
                }
                {
                    link && link.move && <View style={{ marginTop: (hasImg || hasText) ? spaceY : 0 }}>
                        <TargetProgress
                            color={getThemeColor(link.window)}
                            showRing={false}
                            desc={link.move.description}
                            icon={
                                <IconActive color={MainColorType.active} width={rpxToPx(32)} />
                            }
                        />
                    </View>
                }
            </View>
        </View>
    </View>
}