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

import { View, Text, Image, PageContainer } from "@tarojs/components";
import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius, timeTotimestamp } from "../hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import Rings from "./Rings";
import './IndexItem.scss'
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { TimeFormatter } from "@/utils/time_format";
import '@/utils/ring_card.scss';
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import Modal from "@/components/layout/Modal.weapp";
import { ModalType } from "@/utils/types";
import TimelineStage from "./TimelineStage";
import CircadianDetailPopup from "@/features/trackTimeDuration/components/CircadianDetailPopup";
import { rpxToPx } from "@/utils/tools";
import CircadianStatus from "./CircadianStatus";

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Component(props: { type: string, data: any, time: any, showStage?: boolean }) {
    const { t } = useTranslation()
    const [record, setRecord] = useState(props.data.current_record);
    const user = useSelector((state: any) => state.user);
    const dayNight = useSelector((state: any) => state.night);
    const day = useSelector((state: any) => state.day);
    const ring = useSelector((state: any) => state.ring);
    const [stageList, setStageList] = useState([true, false, false])
    const [isStageMode, setIsStageMode] = useState(false)
    const [showDetailModal, setShowDetailModal] = useState(false)
    const [count, setCount] = useState(0)
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        setRecord(props.data.current_record)
    }, [props.data])

    useEffect(() => {
        setCount((pre) => pre + 1)
    }, [dayNight.nightRingSunrise, dayNight.nightRingSunset])


    useEffect(() => {
        if (props.type == 'FAST_SLEEP') {
            global.updateMixItem = (data) => {
                setStageList(data)
            }

            global.changeMixIndex = (index) => {
                setIsStageMode(index == 1)
            }
        }
    }, [])


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

    const startArc = (time: number) => {
        var date = new Date(time);
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
    }

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

        var currentDot1 = getDot(record, true)
        var targetBigRing1 = getTarget(record, true)
        targetBigRing1.color = record.scenario == 'SLEEP' ? ColorType.sleep + '66' : ColorType.fast + '66'
        if (record.status == 'ONGOING') {
            var realRing1 = getReal(record, true, false)
            // debugger
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={props.type + 'index_big'} />
        }
        if (record.status == 'WAIT_FOR_START') {
            var scenario = JSON.parse(JSON.stringify(props.data.scenario))

            if (scenario.name == 'SLEEP') {
                var countduration = (props.data.current_record.sleep.target_end_time - props.data.current_record.sleep.target_start_time) / 60000
                var min1 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.start_time) / 60
                var min2 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.end_time) / 60
                var leftMinutes = min1 < min2 ? min2 - min1 : min2 + 24 * 60 - min1
                if (leftMinutes != countduration) {
                    min2 = min1 + countduration
                    if (min2 > 1440) {
                        min2 -= 1440
                    }
                    var hour = Math.floor(min2 / 60)
                    var minute = min2 % 60
                    scenario.schedule.sleep.end_time = `${hour}:${minute}`
                }
            }
            else {
                var countduration = (props.data.current_record.fast.target_end_time - props.data.current_record.fast.target_start_time) / 60000
                var min1 = TimeFormatter.timestringToSeconds(scenario.schedule.fast.start_time) / 60
                var min2 = TimeFormatter.timestringToSeconds(scenario.schedule.fast.end_time) / 60
                var leftMinutes = min1 < min2 ? min2 - min1 : min2 + 24 * 60 - min1
                if (leftMinutes != countduration) {
                    min2 = min1 + countduration
                    if (min2 > 1440) {
                        min2 -= 1440
                    }
                    var hour = Math.floor(min2 / 60)
                    var minute = min2 % 60
                    scenario.schedule.fast.end_time = `${hour}:${minute}`
                }
            }

            var realRing1 = getSchedule(scenario, scenario.name != 'SLEEP', true, true)//getSchedule(record, props.type != 'SLEEP', true)
            var list: any = []
            if (scenario.name == 'FAST_SLEEP') {
                realRing1.color = ColorType.fast + '66'

                var detail = timeTotimestamp(scenario)

                if (stageList[0]) {

                    const realRingBig: RealRing = {
                        color: global.fastColor ? global.fastColor : ColorType.fast,
                        startArc: startArc(detail.fast.target_start_time),
                        durationArc: durationArc(detail.fast.target_start_time, detail.sleep.target_start_time)
                    }

                    list.push(realRingBig)
                }
                if (stageList[1]) {
                    const realRingBig: RealRing = {
                        color: global.fastColor ? global.fastColor : ColorType.fast,
                        startArc: startArc(detail.sleep.target_start_time),
                        durationArc: durationArc(detail.sleep.target_start_time, detail.sleep.target_end_time)
                    }

                    list.push(realRingBig)
                }
                if (stageList[2]) {
                    const realRingBig: RealRing = {
                        color: global.fastColor ? global.fastColor : ColorType.fast,
                        startArc: startArc(detail.sleep.target_end_time),
                        durationArc: durationArc(detail.sleep.target_end_time, detail.fast.target_end_time)
                    }

                    list.push(realRingBig)
                }
            }
            else if (scenario.name == 'SLEEP') {
                realRing1.color = ColorType.sleep + '66'
            }
            else {
                realRing1.color = ColorType.fast + '66'
            }

            if (user.isLogin) {
                list = []
            }
            if (!user.isLogin) {
                currentDot1 = null
                // realRing1 = null
            }
            return <Rings common={common} bgRing={bgRing} currentDot={isStageMode ? null : currentDot1} stageList={list} realRing={realRing1} canvasId={props.type + 'index_big'} />
        }
        var realRing1 = getReal(record, true, false)
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={props.type + 'index_big'} />

    }

    function smallRing() {

        var common = getCommon(null, false)
        common.radius = smallRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        var realRing = getReal(record, false, false)
        if (props.type == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') {
            if (!record.sleep) {
                return null
            }
            if (record.sleep.status == 'WAIT_FOR_END') {
                var targetBigRing1 = getTarget(record, false)
                targetBigRing1.color = ColorType.sleep + '66'
                var currentDot = getDot(record, false)
                realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + 'index_small'} targetRing={targetBigRing1} realRing={realRing} />
            }
            else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {

                var scenario = JSON.parse(JSON.stringify(props.data.scenario))
                // if (record.status == 'ONGOING1') {
                //     var countduration = (props.data.current_record.sleep.target_end_time - props.data.current_record.sleep.target_start_time) / 60000
                //     var min1 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.start_time) / 60
                //     var min2 = TimeFormatter.timestringToSeconds(scenario.schedule.sleep.end_time) / 60
                //     var leftMinutes = min1 < min2 ? min2 - min1 : min2 + 24 * 60 - min1
                //     if (leftMinutes != countduration) {
                //         min2 = min1 + countduration
                //         if (min2 > 1440) {
                //             min2 -= 1440
                //         }
                //         var hour = Math.floor(min2 / 60)
                //         var minute = min2 % 60
                //         scenario.schedule.sleep.end_time = `${hour}:${minute}`
                //     }
                // }


                if (record.status == 'WAIT_FOR_START') {
                    realRing = getSchedule(scenario, false, true, record.status == 'WAIT_FOR_START')//getSchedule(record, false, true)

                }
                else {
                    realRing.startArc = startArc(record.sleep.target_start_time)
                    realRing.durationArc = durationArc(record.sleep.target_start_time, record.sleep.target_end_time)
                }

                realRing.color = ColorType.sleep + '66'

                var currentDot = getDot(record, false)

                if (!user.isLogin) {
                    currentDot = null
                }

                return <Rings common={common} bgRing={bgRing} currentDot={isStageMode ? null : currentDot} realRing={realRing} canvasId={props.type + 'index_small'} />
            }
            else if (record.sleep.status == 'NOT_COMPLETED') {
                realRing.durationArc = 0.01
                var currentDot = getDot(record, false)
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + 'index_small'} realRing={realRing} />
            }
            else if (record.sleep.status == 'COMPLETED') {
                realRing = getReal(record, false, true)
                var currentDot = getDot(record, false)
                if (record.status == 'ONGOING3') {
                    currentDot = null
                    // currentDot.color = '#ffffffff'
                }
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + 'index_small'} realRing={realRing} />
            }
            else if (record.sleep.status == 'ONGOING2') {
                var currentDot = getDot(record, false)
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + 'index_small'} />
            }
            return <Rings common={common} bgRing={bgRing} canvasId={props.type + 'index_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={props.type + 'index_small'} />
            }
            if (record.status == 'ONGOING3') {
                currentDot.color = 'rgba(0, 255, 255, 0.5)'
            }
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + 'index_small'} />
        }

    }

    function dayRing() {
        var common = getCommon(null, true)
        common.radius = thirdRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()

        let realRingBig: RealRing = {
            color: ColorType.night + '66',
            startArc: 0,
            durationArc: 2
        }
        var sunRise = 24 * 60 + 6 * 60
        var sunSet = 18 * 60

        var sunRiseObj = dayNight.nightRingSunrise
        var sunSetObj = dayNight.nightRingSunset
        sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
        if (sunSetObj.indexOf('PM') != -1) {
            sunSet += 12 * 60
        }
        // }
        var duration = sunRise - sunSet
        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(record, false)
        currentDot.color = ColorType.night

        var now = new Date()
        var t = now.getHours() * 60 + now.getMinutes()
        var duration2 = t - sunSet
        if (duration2 < 0) {
            duration2 += 24 * 60
        }
        let realRing: RealRing = {
            color: ColorType.night,
            startArc: (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }

        if (dayNight.nightRingDate) {
            if (new Date(dayNight.nightRingDate).getDate() == new Date().getDate() && new Date().getHours() < 12) {

                realRing = null;
            }
        }

        if (!user.isLogin) {
            currentDot = null;
            realRing = null;
        }


        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 > duration ? null : realRing} currentDot={currentDot} canvasId={props.type + 'index_day'} />
    }

    function rings() {
        return <View style={{
            position: 'relative', zIndex: 1,
            marginLeft: !props.showStage && global.showNightRing === true && false ? -6 : 0,
        }}>
            {
                bigRing()
            }
            {
                props.data.scenario.name == 'FAST_SLEEP' && <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        smallRing()
                    }
                </View>
            }
            {
                !props.showStage && day.showDayRing === true && false && <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
                    {
                        dayRing()
                    }
                </View>
            }

        </View>
    }

    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()
        }
        if (obj.status == 'WAIT_FOR_START') {
            start = obj.target_start_time
            end = obj.target_end_time
        }
        return TimeFormatter.durationFormate(start, end)
        // return TimeFormatter.calculateTimeDifference(start, end)
    }

    function fastDuration() {
        if (!record.fast) {
            return ''
        }
        if (!user.isLogin && record.sleep) {
            var count = 0
            if (stageList[0]) {

                count = record.sleep.target_start_time - record.fast.target_start_time
            }
            if (stageList[1]) {
                count += record.sleep.target_end_time - record.sleep.target_start_time
            }
            if (stageList[2]) {
                count += record.fast.target_end_time - record.sleep.target_end_time
            }
            if (count == 0) {
                return t('feature.track_time_duration.stage.no_stage_selected')
            }
            global.fastDuration = TimeFormatter.durationFormate(new Date().getTime(), new Date().getTime() + count)//`${count}小时`
            return TimeFormatter.durationFormate(new Date().getTime(), new Date().getTime() + count)//`${count}小时`
        }
        if (record.fast.status == 'WAIT_FOR_END') {
            global.fastDuration = TimeFormatter.countdown(record.fast.real_start_time)
            return TimeFormatter.countdown(record.fast.real_start_time)
            // return TimeFormatter.formateTimeDifference(record.fast.real_start_time, new Date().getTime(), false)
        }
        if (isStageMode && record.scenario == 'FAST_SLEEP') {
            if (stageList[0]) {
                return TimeFormatter.durationFormate(record.fast.target_start_time, record.sleep.target_start_time)
            }
            if (stageList[1]) {
                return TimeFormatter.durationFormate(record.sleep.target_start_time, record.sleep.target_end_time)
            }
            if (stageList[2]) {
                return TimeFormatter.durationFormate(record.sleep.target_end_time, record.fast.target_end_time)
            }
        }
        global.fastDuration = getDuration(record.fast)
        return getDuration(record.fast)
    }

    function sleepDuration() {
        if (!record.sleep) {
            return ''
        }
        if (record.sleep.status == 'WAIT_FOR_END') {
            global.sleepDuration = TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
            return TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
        }
        global.sleepDuration = getDuration(record.sleep)
        return getDuration(record.sleep)
    }

    function nightDuration() {

        var sunRiseObj = dayNight.nightRingSunrise
        var sunSetObj = dayNight.nightRingSunset
        var sunRise = 24 * 60 + parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
        var sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
        if (sunSetObj.indexOf('PM') != -1) {
            sunSet += 12 * 60
        }

        var duration = (sunRise - sunSet) * 60 * 1000

        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }


    function goDetail(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        setShowDetailModal(true)
    }

    function modalContent() {
        return <Modal
            testInfo={null}
            dismiss={() => {
                global.pauseIndexTimer = false
                setShowDetailModal(false)
            }}
            confirm={() => { }}>
            {
                <CircadianDetailPopup
                    record={record}
                    schedule={props.data.scenario.schedule}
                    onClose={() => { setShowDetailModal(false); }} />
            }
        </Modal>
    }

    return <View className="ring_full_container">

        <View className="time_operate_item1" onClick={goDetail}>

            <View className={!props.showStage && day.showDayRing === true && false ?
                'fast_sleep_item three_ring_card_detail' : 'fast_sleep_item ring_card_detail'}>
                {
                    rings()
                }
                <View className='top_tag_bg'>
                    <CircadianStatus data={props.data} />
                </View>
                <View className="duration_bg2" style={{ marginLeft: (!props.showStage && day.showDayRing === true && false) ? rpxToPx(68) : rpxToPx(52), height: bigRingRadius * 2, overflow: 'visible' }}>
                    {
                        !props.showStage && day.showDayRing === true && false &&
                        <Text className="duration_title2">{t('feature.common.overnight')}</Text>
                    }
                    {
                        !props.showStage && day.showDayRing === true && false &&
                        <Text className="duration_value2" style={{ color: ColorType.night }}>{nightDuration()}</Text>
                    }
                    {
                        (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title2">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                    }
                    {
                        (props.data.scenario.name == 'FAST' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value2" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration()}</Text>
                    }
                    {
                        (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_title2" >{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                    }
                    {
                        (props.data.scenario.name == 'SLEEP' || props.data.scenario.name == 'FAST_SLEEP') && <Text className="duration_value2" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, marginBottom: 0 }}>{sleepDuration()}</Text>
                    }

                </View>
                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />


            </View>
            {
                showDetailModal && modalContent()
            }
        </View>
    </View>
}