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

import Box from '@/components/layout/Box'
import './AllRings.scss'
import { PageContainer, View, Text } from '@tarojs/components'
import { useEffect, useState } from 'react'
import Modal from '@/components/layout/Modal.weapp'
import { bigRingRadius, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius, timeTotimestamp } from '../hooks/RingData'
import { rpxToPx } from '@/utils/tools'
import { ColorType } from '@/context/themes/color'
import { useTranslation } from 'react-i18next'
import Rings from "./Rings";
import { TimeFormatter } from '@/utils/time_format'
import { useSelector } from 'react-redux'
import { RealRing } from '@/features/trackTimeDuration/components/Rings'
import DayNightRing from './DayNightRing'


export default function AllRings(props: { data?: any, time?: any }) {
    const [showRing, setShowRing] = useState(false)
    const [record, setRecord] = useState(props.data.current_record);
    const user = useSelector((state: any) => state.user);
    const nightStore = useSelector((state: any) => state.night);
    const [authInfo, setAuthInfo] = useState(global.locationDetail ? global.locationDetail : null)
    const { t } = useTranslation()

    useEffect(() => {
        setAuthInfo(global.locationDetail)
    }, [global.locationDetail])

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

    function tapShow() {
        setShowRing(true)
    }

    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'
        debugger
        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'
            }
            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={currentDot1} stageList={list} realRing={realRing1} canvasId={'full_index_big'} />
        }
        var realRing1 = getReal(record, true, false)
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={'full_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.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={'full_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 == '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={currentDot} realRing={realRing} canvasId={'full_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={'full_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={'full_index_small'} realRing={realRing} />
            }
            else if (record.sleep.status == 'ONGOING2') {
                var currentDot = getDot(record, false)
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} />
            }
            return <Rings common={common} bgRing={bgRing} canvasId={'full_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={'full_index_small'} />
            }
            if (record.status == 'ONGOING3') {
                currentDot.color = 'rgba(0, 255, 255, 0.5)'
            }
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'full_index_small'} />
        }

    }

    function dayRing() {
        return <DayNightRing
            isNight={true}
            isThirdRing={true}
            canvasId={'day_night_card_big_night_ring111'}
            authInfo={authInfo}
        />
    }

    function rings() {
        return <View style={{
            position: 'relative', zIndex: 1,
            marginLeft: -6,
        }}>
            {
                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>
            }
            {
                <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
                    {
                        dayRing()
                    }
                </View>
            }

        </View>
    }


    function fastDuration() {
        return global.fastDuration
    }

    function sleepDuration() {
        return global.sleepDuration
    }

    function nightDuration() {
        return global.sunsetDuration
    }


    function popDetail() {
        return <Box>
            <View className="ring_full_container">
                <View className="time_operate_item1">
                    <View className='fast_sleep_item three_ring_card_detail'>
                        {
                            rings()
                        }
                        <View className="duration_bg2" style={{ marginLeft: rpxToPx(68), height: bigRingRadius * 2, overflow: 'visible' }}>

                            <Text className="duration_title2">{t('feature.common.overnight')}</Text>
                            <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>


                    </View>
                </View>
            </View>
        </Box>
    }

    function modalContent() {
        if (process.env.TARO_ENV == 'weapp') {
            return <Modal
                testInfo={null}
                dismiss={() => {
                    setShowRing(false)
                }}
                confirm={() => { }}>
                {popDetail()}
            </Modal>
        }
        else if (process.env.TARO_ENV == 'rn') {
            return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                // overlayStyle='background-color:rgba(0,0,0,0.9)'
                // custom-style='background-color:#1c1c1c'
                overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                customStyle={{ backgroundColor: '#1c1c1c' }}
                closeOnSlideDown={false}
                onBeforeEnter={() => {

                }}
                onBeforeLeave={() => {
                }}
                onClick={() => { alert('b') }}
                onClickOverlay={() => { alert('a') }}
                onAfterLeave={() => { setShowRing(false) }}
                show={showRing} round={true} overlay={true} position='bottom'
            >
                {popDetail()}
            </PageContainer>
        }
    }
    return <Box onClick={tapShow}>
        <View style={{ color: '#fff' }}>同步显示生物钟</View>
        {
            showRing && modalContent()
        }
    </Box>
}