taro/src/features/trackTimeDuration/components/TimelineFastSleep.tsx

import Timeline from "@/components/view/Timeline";
import { TimeFormatter } from "@/utils/time_format";
import { View, Text } from "@tarojs/components";
import getStatus from "../hooks/Record";
import { ColorType } from "@/context/themes/color";
import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import './TimelineFastSleep.scss'

export default function TimelineFastSleep(props: { data: any, title?: string, first_real_check_time?: number, multiTimeZone?: boolean, diffTimeZone?: boolean }) {
    const { t } = useTranslation()
    const [diffTimeZone, setDiffTimeZone] = useState(props.diffTimeZone)
    const [multTimeZone, setMulTimeZone] = useState(props.multiTimeZone)
    const scenario = useSelector((state: any) => state.scenario);

    useEffect(() => {
        // var split = new Date().toString().split(' ');
        // var currentTZ = split[split.length - 2];
        // if (props.data.fast) {
        //     if (props.data.fast.real_start_time_zone && props.data.fast.real_start_time_zone != currentTZ) {
        //         setDiffTimeZone(true)
        //         return
        //     }
        //     if (props.data.fast.real_end_time_zone && props.data.fast.real_end_time_zone != currentTZ) {
        //         setDiffTimeZone(true)
        //         return
        //     }
        // }

        // if (props.data.sleep) {
        //     if (props.data.sleep.real_start_time_zone && props.data.sleep.real_start_time_zone != currentTZ) {
        //         setDiffTimeZone(true)
        //         return
        //     }
        //     if (props.data.sleep.real_end_time_zone && props.data.sleep.real_end_time_zone != currentTZ) {
        //         setDiffTimeZone(true)
        //         return
        //     }
        // }
        // setDiffTimeZone(false)

    }, [props.data])


    function formateTime(obj: any, isEnd: boolean) {
        if (isEnd) {
            if (obj.real_end_time) {
                var newTimestamp = TimeFormatter.transferTimestamp(obj.real_end_time, obj.real_end_time_zone)
                return TimeFormatter.timelineFormatTime(newTimestamp)
                // return diffTimeZone ? TimeFormatter.timelineFullFormatTime(newTimestamp) : TimeFormatter.timelineFormatTime(obj.real_end_time)
            }
            else {
                return TimeFormatter.timelineFormatTime(obj.target_end_time)
                // return diffTimeZone ? TimeFormatter.timelineFullFormatTime(obj.target_end_time) : TimeFormatter.timelineFormatTime(obj.target_end_time)
            }
        }
        else {
            if (obj.real_start_time) {
                var newTimestamp = TimeFormatter.transferTimestamp(obj.real_start_time, obj.real_start_time_zone)
                return TimeFormatter.timelineFormatTime(newTimestamp)
                // return diffTimeZone ? TimeFormatter.timelineFullFormatTime(newTimestamp) : TimeFormatter.timelineFormatTime(obj.real_start_time)
            }
            else {
                return TimeFormatter.timelineFormatTime(obj.target_start_time)
                // return diffTimeZone ? TimeFormatter.timelineFullFormatTime(obj.target_start_time) : TimeFormatter.timelineFormatTime(obj.target_start_time)
            }
        }

    }

    function formateDate(obj: any, isEnd: boolean) {
        if (isEnd) {
            if (obj.real_end_time) {
                return TimeFormatter.dateDescription(obj.real_end_time, true)
            }
            else {
                return TimeFormatter.dateDescription(obj.target_end_time, true)
            }
        }
        else {
            if (obj.real_start_time) {
                return TimeFormatter.dateDescription(obj.real_start_time, true)
            }
            else {
                return TimeFormatter.dateDescription(obj.target_start_time, true)
            }
        }

    }

    function getWaitForStartDate(time: string) {
        var strTime
        if (scenario.name == 'SLEEP') {
            strTime = scenario.schedule.sleep.start_time
        }
        else {
            strTime = scenario.schedule.fast.start_time
        }
        var count = parseInt(strTime.split(':')[0]) * 60 + parseInt(strTime.split(':')[1])
        var count2 = parseInt(time.split(':')[0]) * 60 + parseInt(time.split(':')[1])
        if (count > count2) {
            return global.language == 'en' ? 'Tomorrow' : '明天'
        }
        return ''
    }

    var timelineItems: any = [];
    /*
    attention:
    status == 待开始时
    timeline的时间不以时间戳进行处理，而是以target时间字符串进行显示
    */
    if (props.data.fast && scenario.name != 'SLEEP') {
        var timeZone = ''
        if (props.data.fast.real_start_time_zone) {
            timeZone = ' ' + props.data.fast.real_start_time_zone
        }
        debugger
        timelineItems.push(
            {
                status: getStatus(true, true, props.data),
                title: getStatus(true, true, props.data) == 'padding' ?
                    t('feature.track_time_duration.common.start_fast') :
                    t('feature.track_time_duration.common.started_fasting'),
                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.fast, false) + scenario.schedule.fast.start_time : formateDate(props.data.fast, false) + formateTime(props.data.fast, false),
                date: props.data.status == 'WAIT_FOR_START' ? '' : multTimeZone ? timeZone : '',
                // (diffTimeZone ? timeZone : showDate(props.data.fast, false) ? formateDate(props.data.fast, false) : ''),
                color: global.fastColor ? global.fastColor : ColorType.fast
            }
        )
    }
    if (props.data.sleep && scenario.name != 'FAST') {
        var timeZone = ''
        if (props.data.sleep.real_start_time_zone) {
            timeZone = ' ' + props.data.sleep.real_start_time_zone
        }
        var status = getStatus(false, true, props.data)
        var strContent = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.sleep, false) + scenario.schedule.sleep.start_time : formateDate(props.data.sleep, false) + formateTime(props.data.sleep, false)
        var strDate =  multTimeZone ? timeZone : ''
        // (diffTimeZone ? timeZone : showDate(props.data.sleep, false) ? formateDate(props.data.sleep, false) : '')
        timelineItems.push(
            {
                status: status,
                title: status == 'padding' ?
                    t('feature.track_time_duration.common.start_sleep') :
                    t('feature.track_time_duration.common.started_sleeping'),
                content: status == 'un_done' ? '' : strContent,
                date: status == 'un_done' ? '' : strDate,
                color: global.sleepColor ? global.sleepColor : ColorType.sleep
            }
        )
    }
    if (props.data.sleep && scenario.name != 'FAST') {
        var timeZone = ''
        if (props.data.sleep.real_end_time_zone) {
            timeZone = ' ' + props.data.sleep.real_end_time_zone
        }
        var status = getStatus(false, false, props.data)
        var strContent: string = props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.sleep, true) + scenario.schedule.sleep.end_time : formateDate(props.data.sleep, true) + formateTime(props.data.sleep, true)
        var strDate =  multTimeZone ? timeZone : ''
        // (diffTimeZone ? timeZone : showDate(props.data.sleep, true) ? formateDate(props.data.sleep, true) : '')
        timelineItems.push(
            {
                status: status,
                title: status == 'padding' ?
                    t('feature.track_time_duration.common.end_sleep') :
                    t('feature.track_time_duration.common.ended_sleeping'),
                content: status == 'un_done' ? '' : strContent,
                date: status == 'un_done' ? '' : strDate,
                color: global.sleepColor ? global.sleepColor : ColorType.sleep
            }
        )
    }
    if (props.data.fast && scenario.name != 'SLEEP') {
        var timeZone = ''
        if (props.data.fast.real_end_time_zone) {
            timeZone = ' ' + props.data.fast.real_end_time_zone
        }
        timelineItems.push(
            {
                status: getStatus(true, false, props.data),
                title: getStatus(true, false, props.data) == 'padding' ?
                    t('feature.track_time_duration.common.end_fast') :
                    t('feature.track_time_duration.common.ended_fasting'),
                content: props.data.status == 'WAIT_FOR_START' ? formateDate(props.data.fast, true) + scenario.schedule.fast.end_time : formateDate(props.data.fast, true) + formateTime(props.data.fast, true),
                date:  multTimeZone ? timeZone : '',
                // (diffTimeZone ? timeZone : showDate(props.data.fast, true) ? formateDate(props.data.fast, true) : ''),
                color: global.fastColor ? global.fastColor : ColorType.fast
            }
        )
    }

    function getTZLocation() {
        if (props.data.fast) {
            if (props.data.fast.real_start_time_zone_id) {
                return props.data.fast.real_start_time_zone_id
            }
            return props.data.fast.real_start_time_zone
        }
        else {
            if (props.data.sleep.real_start_time_zone_id) {
                return props.data.sleep.real_start_time_zone_id
            }
            return props.data.sleep.real_start_time_zone
        }
    }

    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ display: 'flex', flexDirection: 'row' }}>
            <Timeline items={timelineItems} title={props.title} width={468} />
            <View>
            </View>
        </View>
        {
            multTimeZone && <Text className="tz_note_desc">{t('feature.common.multi_tz_desc')}</Text>
        }
        {
            !multTimeZone && diffTimeZone && <Text className="tz_note_desc">{t('feature.common.diff_tz_desc', { location: getTZLocation() })}</Text>
        }
    </View>
}