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

import Box from "@/components/layout/Box";
import Header from "@/components/layout/Header";
import Modal from "@/components/layout/Modal";
import RecordItem from "@/features/common/RecordItem";
import { delRecord } from "@/services/trackTimeDuration";
import { ModalType } from "@/utils/types";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import TimelineFastSleep from "./TimelineFastSleep";
import { TimeFormatter } from "@/utils/time_format";
import './RecordFastSleep.scss'
import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
import Rings from "./Rings";
import Segment from "@/components/navigation/Segment";
import Stage from "./Stage";
import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";
import TimelineStage from "./TimelineStage";
import { jumpPage } from "../hooks/Common";
// import { sqrt } from 'mathjs'

let AppState;
if (process.env.TARO_ENV == 'rn') {
    AppState = require("react-native").AppState
}

export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
    const [showDetailModal, setShowDetailModal] = useState(false)
    const [segmentIndex, setSegmentIndex] = useState(0)
    const [diffTimeZone, setDiffTimeZone] = useState(false)
    const [multiTimeZone, setMultiTimeZone] = useState(false)
    const { t } = useTranslation()
    const canvasId = props.data.id
    const record = props.data;

    const handleAppStateChange = (nextAppState) => {
        checkTimezone()
    };

    useEffect(() => {
        checkTimezone()
        if (process.env.TARO_ENV == 'rn') {
            AppState.addEventListener('change', handleAppStateChange);
        }
        // console.log(sqrt(-4).toString())
    }, [props.data])

    function checkTimezone() {
        var split = new Date().toString().split(' ');
        var currentTZ = split[split.length - 2];
        var isDiff = false;
        var isMulti = false;
        var tempTZ = '';
        if (props.data.fast) {
            if (props.data.fast.real_start_time_zone) {
                tempTZ = props.data.fast.real_start_time_zone
                if (props.data.fast.real_start_time_zone != currentTZ) {
                    isDiff = true
                }
            }

            if (props.data.fast.real_end_time_zone) {
                if (tempTZ != props.data.fast.real_end_time_zone) {
                    isMulti = true
                }
                if (props.data.fast.real_end_time_zone != currentTZ) {
                    isDiff = true
                }
            }

        }

        if (props.data.sleep) {
            if (props.data.sleep.real_start_time_zone) {
                if (tempTZ == '') {
                    tempTZ = props.data.sleep.real_start_time_zone
                }
                else if (tempTZ != props.data.sleep.real_start_time_zone) {
                    isMulti = true
                }
                if (props.data.sleep.real_start_time_zone != currentTZ) {
                    isDiff = true
                }
            }

            if (props.data.sleep.real_end_time_zone) {
                if (tempTZ != props.data.sleep.real_end_time_zone) {
                    isMulti = true
                }
                if (props.data.sleep.real_end_time_zone != currentTZ) {
                    isDiff = true
                }
            }


        }
        setDiffTimeZone(isDiff)
        setMultiTimeZone(isMulti)
    }
    function del() {
        var id = props.data.id
        delRecord(id
        ).then(res => {
            global.refreshTime()
            Taro.showToast({
                title: t('page.records_history.del_success')
            })
            props.delSuccess && props.delSuccess(props.data)
            // Taro.navigateBack()
        })
    }

    function subTitle(timestamp) {
        if (multiTimeZone) {
            return t('feature.common.multi_timezones')
        }
        if (diffTimeZone) {
            return t('feature.common.different_timezone')
        }
        return TimeFormatter.getDateAndWeek(timestamp)
    }

    function schedules() {
        var timestamp = props.data.first_real_check_time

        return <View style={{ display: 'flex', flexDirection: 'column' }}>
            <TimelineStage data={props.data} title={t('feature.track_time_duration.record_fast_sleep.pop_title')}
                subTitle={subTitle(timestamp)} first_real_check_time={timestamp} />
        </View>
    }

    function showDetail(e) {
        if (props.type == 'latest') {
            setSegmentIndex(0)
            global.segmentIndex = 0
            setShowDetailModal(true)
            return;
        }
        setShowDetailModal(true)

        // var node = (<Modal children={schedules()}
        //     modalType={ModalType.center}
        //     dismiss={() => {
        //         global.showModal(false, null)
        //     }}
        //     confirm={() => { }} />);
        // global.showModal(true, node);
    }

    function getDuration(obj) {
        if (!obj) {
        }
        if (obj.status == 'NOT_STARTED' || obj.status == 'NOT_COMPLETED') {
            return ''
        }
        var start = obj.real_start_time
        var end = obj.real_end_time
        if (!end) {
            end = (new Date()).getTime()
        }
        return TimeFormatter.durationFormate(start, end)
        // return TimeFormatter.calculateTimeDifference(start, end)
    }

    function durationArc(start_time: number, end_time: number) {
        var duration = (end_time - start_time) / 1000;
        return duration / (24 * 3600) * 2 * Math.PI;
    }

    function bigRing() {
        var common = getCommon(null, true)
        common.radius = 42;
        common.lineWidth = 9;
        var bgRing = getBgRing()

        if (props.type == 'record' || props.type == 'latest') {
            var realRing = getReal(record, true, true)
            if (props.data.status == 'ONGOING3') {
                realRing.color = 'rgba(0,0,0,0)'
                // bgRing.color = 'rgba(0,0,0,0)'
            }
            return <Rings common={common} bgRing={bgRing} canvasId={canvasId} realRing={realRing} />
        }
        else {
            var currentDot1 = getDot(record, true)
            var targetBigRing1 = getTarget(record, true)
            if (record.status == 'ONGOING') {
                var realRing1 = getReal(record, true, false)

                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={canvasId} />
            }
            if (record.status == 'WAIT_FOR_START') {
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId={canvasId} />
            }
            var realRing1 = getReal(record, true, false)
            return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={canvasId} />
        }
    }

    function smallRing() {
        if (record.scenario == 'FAST_SLEEP') {
            var common = getCommon(null, false)
            common.radius = 28;
            common.lineWidth = 9;
            var bgRing = getBgRing()
            var realRing = getReal(record, false, false)
            if (props.type == 'record' || props.type == 'latest') {
                if (record.sleep.status == 'WAIT_FOR_END') {
                    realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'NOT_COMPLETED') {
                    realRing.durationArc = 0.01
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'COMPLETED') {
                    realRing = getReal(record, false, true)
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} />
            }
            else {


                var currentDot = getDot(record, false)
                var targetRing = getTarget(record, false)
                if (record.status == 'ONGOING2') {
                    var realRing = getReal(record, false, false)
                    return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId={canvasId + 'small'} />
                }
                if (record.status == 'ONGOING3') {
                    currentDot.color = 'rgba(0, 255, 255, 0.5)'
                }
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={canvasId + 'small'} />
            }
        }
        return null
    }

    function rings() {
        return <View style={{ position: 'relative', zIndex: 1 }}>
            {
                bigRing()
            }
            <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                {
                    smallRing()
                }
            </View>
        </View>
    }

    function recordTime() {
        var timestamp = props.data.first_real_check_time
        if (props.data.first_time_zone) {
            timestamp = TimeFormatter.transferTimestamp(timestamp, props.data.first_time_zone)
        }
        return TimeFormatter.dateDescription(timestamp, true)
    }

    function getArrowText() {
        if (multiTimeZone) {
            return t('feature.common.multi_timezones')
        }
        if (diffTimeZone) {
            return t('feature.common.different_timezone')
        }
        return recordTime()
    }

    function recordDetail() {
        var fastDuration = ''
        var sleepDuration = ''
        var showFast = false;
        var showSleep = false;
        if (record.scenario == 'FAST_SLEEP') {
            fastDuration = getDuration(record.fast)
            sleepDuration = getDuration(record.sleep)
            if (record.status == 'ONGOING3') {
                fastDuration = t('feature.common.wait_for_end')
            }

            if (record.sleep.status == "NOT_STARTED") {
                sleepDuration = t('feature.common.not_started')
            }
            else if (record.sleep.status == 'NOT_COMPLETED') {
                sleepDuration = t('feature.common.not_completed')
            }
            showFast = true
            showSleep = true
        }
        else if (record.scenario == 'FAST') {
            fastDuration = getDuration(record.fast)
            showFast = true
        }
        else {
            sleepDuration = getDuration(record.sleep)
            showSleep = true
        }
        return <View className="fast_sleep_item">
            {
                rings()
            }
            <View className="duration_bg">
                {
                    showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                }
                {
                    showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
                }
                {
                    showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                }
                {
                    showSleep && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration}</Text>
                }
            </View>
            {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
            <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                <View style={{ flex: 1 }} />
                <Text className='recordTime'>{getArrowText()}</Text>
                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
            </View>

        </View>
    }

    return <View>
        <View className="time_operate_item">
            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
                onClick={showDetail}
            >{recordDetail()}
            </RecordItem>
            {
                showDetailModal && <Modal children={schedules()}
                    modalType={ModalType.center}
                    dismiss={() => setShowDetailModal(false)}
                    confirm={() => { }} />
            }
        </View>
    </View>
}