taro/src/features/daynight/AllDayRings.tsx

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

let sunriseA = new Date()
sunriseA.setHours(6)
sunriseA.setMinutes(0)
sunriseA.setSeconds(0)
sunriseA.setMilliseconds(0)
const sunsetA = new Date()
sunsetA.setHours(18)
sunsetA.setMinutes(0)
sunsetA.setSeconds(0)
sunsetA.setMilliseconds(0)

const sunriseB = new Date()
sunriseB.setHours(6)
sunriseB.setMinutes(0)
sunriseB.setSeconds(0)
sunriseB.setMilliseconds(0)

let GradientText
if (process.env.TARO_ENV == 'rn') {
    GradientText = require('@/components/basic/GradientText').default
}

export default function AllDayRings(props: { schedule: any }) {
    const [authInfo, setAuthInfo] = useState(global.locationDetail ? global.locationDetail : null)
    const [showRing, setShowRing] = useState(false)
    const user = useSelector((state: any) => state.user);
    const ring = useSelector((state: any) => state.ring);
    const [schedule] = useState(props.schedule)
    const { t } = useTranslation()

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

    global.tapShowDay = () => {
        setShowRing(true)
    }

    function getFoodTime() {
        if (ring.schedule) {
            return [ring.schedule.fast.end_time, ring.schedule.fast.start_time]
        }
        var obj;
        (schedule as any).map(item => {
            if (item.name == 'FAST') {
                obj = item
            }
        })
        if (!obj) {
            console.log('报错', schedule)
            return ['16:00', '08:00'];
        }
        return [obj.schedule.fast.end_time, obj.schedule.fast.start_time]
    }

    function getActivityTime() {
        if (ring.schedule) {
            return [ring.schedule.sleep.end_time, ring.schedule.sleep.start_time]
        }
        var obj;
        (schedule as any).map(item => {
            if (item.name == 'SLEEP') {
                obj = item
            }
        })
        return [obj.schedule.sleep.end_time, obj.schedule.sleep.start_time]
    }

    function bigRing() {
        var common = getCommon(null, true)
        common.radius = bigRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        const targetRing: RealRing = {
            color: (ring.current_record && ring.current_record.scenario == 'SLEEP') ? ColorType.activity + '66' : ColorType.food + '66',
            startArc: 0,
            durationArc: 2
        }
        var list = getFoodTime()
        var start;
        var end;

        if (ring.current_record && ring.current_record.scenario == 'SLEEP') {
            var list2 = getActivityTime()
            start = parseInt(list2[0].split(':')[0]) * 60 + parseInt(list2[0].split(':')[1])
            end = parseInt(list2[1].split(':')[0]) * 60 + parseInt(list2[1].split(':')[1])
            if (ring.current_record.status != 'WAIT_FOR_START') {
                var startDate = new Date(ring.current_record.sleep.target_start_time)
                var endDate = new Date(ring.current_record.sleep.target_end_time)
                end = startDate.getHours() * 60 + startDate.getMinutes()
                start = endDate.getHours() * 60 + endDate.getMinutes()
            }
        }
        else {
            start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
            end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
            if (ring.current_record && ring.current_record.status != 'WAIT_FOR_START') {
                var startDate = new Date(ring.current_record.fast.target_start_time)
                var endDate = new Date(ring.current_record.fast.target_end_time)
                end = startDate.getHours() * 60 + startDate.getMinutes()
                start = endDate.getHours() * 60 + endDate.getMinutes()
            }
        }

        if (end < start) {
            end += 24 * 60
        }
        var duration = end - start
        targetRing.startArc = (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        targetRing.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)
        var date = new Date()
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < start) {
            minutes += 1440
        }

        currentDot.color = ColorType.food


        var now = new Date()
        var t = now.getHours() * 60 + now.getMinutes()
        var duration2 = t - start
        if (duration2 < 0) {
            duration2 += 24 * 60
        }

        let realRing: RealRing = {
            color: ColorType.food,
            startArc: (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }

        if (ring.current_record && ring.current_record.scenario == 'SLEEP') {
            realRing.color = ColorType.activity
            currentDot.color = ColorType.activity
        }

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

        if (ring.current_record.status == 'ONGOING1') {
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'pop_day_big'} />
    }
    function smallRing() {
        var common = getCommon(null, false)
        common.radius = smallRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        const realRingBig: RealRing = {
            color: ColorType.activity + '66',
            startArc: 0,
            durationArc: 2
        }
        var list = getActivityTime()
        var start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
        var end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
        if (ring.current_record) {
            if (ring.current_record.scenario == 'SLEEP') {
                if (ring.current_record.status == 'ONGOING') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 60 + startDate.getMinutes()
                    start = endDate.getHours() * 60 + endDate.getMinutes()
                }
            }
            else {
                if (ring.current_record.status == 'ONGOING2') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 60 + startDate.getMinutes()
                    start = endDate.getHours() * 60 + endDate.getMinutes()
                }
                else if (ring.current_record.status == 'ONGOING3') {
                    //睡眠已完成时，睡眠小于24小时，使用真实的real_end_time-real_start_time
                    //大于24小时，使用real_end_time+sleep_duration
                    if (ring.current_record.sleep.real_end_time - ring.current_record.sleep.real_start_time < 24 * 3600 * 1000) {
                        var startDate = new Date(ring.current_record.sleep.real_start_time)
                        var endDate = new Date(ring.current_record.sleep.real_end_time)
                        end = startDate.getHours() * 60 + startDate.getMinutes()
                        start = endDate.getHours() * 60 + endDate.getMinutes()
                    }
                    else {
                        var startDate = new Date(ring.current_record.sleep.real_end_time)
                        var durationTemp = end - start//ring.current_record.sleep.target_end_time-ring.current_record.sleep.target_start_time
                        if (durationTemp < 0) {
                            durationTemp += 24 * 60
                        }
                        var endDate = new Date(startDate.getTime() + durationTemp * 60 * 1000)
                        start = startDate.getHours() * 60 + startDate.getMinutes()
                        end = endDate.getHours() * 60 + endDate.getMinutes()
                    }
                }
            }

        }
        if (end < start) {
            end += 24 * 60
        }
        var duration = end - start
        realRingBig.startArc = (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)
        var date = new Date()
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < start) {
            minutes += 1440
        }

        currentDot.color = ColorType.activity


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

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

        if (ring.current_record.status == 'ONGOING2') {
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'pop_day_small'} />
    }
    function dayRing() {
        return <DayNightRing
            isNight={false}
            isThirdRing={true}
            canvasId={'day_night_card_big_day_ring111'}
            authInfo={authInfo}
        />
    }


    function rings() {
        return <View style={{
            position: 'relative', zIndex: 1,
            marginLeft: -6,
        }}>
            {
                bigRing()
            }
            {
                ring.current_record && ring.current_record.scenario == '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 dayDuration() {
        return global.sunriseDuration
    }

    function eatDuration() {
        var list = getFoodTime()
        var start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
        var end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
        if (ring.current_record && ring.current_record.status != 'WAIT_FOR_START' && ring.current_record.scenario != 'SLEEP') {
            var startDate = new Date(ring.current_record.fast.target_start_time)
            var endDate = new Date(ring.current_record.fast.target_end_time)
            end = startDate.getHours() * 60 + startDate.getMinutes()
            start = endDate.getHours() * 60 + endDate.getMinutes()
        }
        if (end < start) {
            end += 24 * 60
        }
        var duration = (end - start) * 60 * 1000
        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }

    function activityDuration() {
        var list = getActivityTime()
        var start = parseInt(list[0].split(':')[0]) * 3600 + parseInt(list[0].split(':')[1]) * 60
        var end = parseInt(list[1].split(':')[0]) * 3600 + parseInt(list[1].split(':')[1]) * 60
        if (ring.current_record) {
            if (ring.current_record.scenario == 'SLEEP') {
                if (ring.current_record.status == 'ONGOING') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                    start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                }
            }
            else {
                if (ring.current_record.status == 'ONGOING2') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                    start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                }
                else if (ring.current_record.status == 'ONGOING3') {
                    //睡眠已完成时，睡眠小于24小时，使用真实的real_end_time-real_start_time
                    //大于24小时，使用real_end_time+sleep_duration
                    if (ring.current_record.sleep.real_end_time - ring.current_record.sleep.real_start_time < 24 * 3600 * 1000) {
                        var startDate = new Date(ring.current_record.sleep.real_start_time)
                        var endDate = new Date(ring.current_record.sleep.real_end_time)
                        end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                        start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                    }
                    else {
                        var startDate = new Date(ring.current_record.sleep.real_end_time)
                        var durationTemp = start - end//ring.current_record.sleep.target_end_time-ring.current_record.sleep.target_start_time

                        if (durationTemp < 0) {
                            durationTemp += 24 * 3600
                        }
                        var endDate = new Date(startDate.getTime() + durationTemp * 1000)
                        end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                        start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                        debugger
                        console.log('active', end, start, durationTemp)
                    }
                }
            }

        }
        if (end < start) {
            end += 24 * 3600
        }
        var duration = (end - start) * 1000
        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }

    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_bg3"
                            style={{ 
                                display:'flex',
                                flexDirection:'column',
                                marginLeft: rpxToPx(68),
                             height: bigRingRadius * 2, 
                             overflow: 'visible' }}>
                            <Text className="duration_title2" style={{ color: '#fff', opacity: 0.4 }}>{t('feature.common.day')}</Text>
                            <Text className="duration_value2" style={{ color: ColorType.day }}>{dayDuration()}</Text>

                            {
                                ring.current_record && ring.current_record.scenario != 'SLEEP' && <Text className="duration_title2" style={{ color: '#fff', opacity: 0.4 }}>进食</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'SLEEP' && <Text className="duration_value2" style={{ color: ColorType.food }}>{eatDuration()}</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'FAST' && <Text className="duration_title2" style={{ color: '#fff', opacity: 0.4 }}>活动</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'FAST' && <Text className="duration_value2" style={{ color: ColorType.activity, marginBottom: 0 }}>{activityDuration()}</Text>
                            }
                        </View>


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

    function modalContent() {
        return <Modal
            testInfo={null}
            dismiss={() => {
                setShowRing(false)
            }}
            confirm={() => { }}>
            {popDetail()}
        </Modal>
    }

    return <View>
        {
            showRing && modalContent()
        }
    </View>

    // return <Box onClick={tapShow}>
    //     <View onClick={tapShow} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
    //         <Image className='three_ring_icon' src={require('@assets/images/day_three_ring.png')} />
    //         {/* <View className='day_show_full'>{t('feature.day_night.show_all_rings')}</View> */}
    //         {
    //             process.env.TARO_ENV == 'weapp' ? <Text className='day_show_full'>{t('feature.day_night.show_all_rings')}</Text> :
    //                 <GradientText
    //                     colors={[ColorType.day, ColorType.food, ColorType.activity]}
    //                     style={{
    //                         fontSize: rpxToPx(32),
    //                         fontWeight: 'bold',

    //                     }}>{t('feature.day_night.show_all_rings')}</GradientText>
    //         }
    //     </View>
    //     {
    //         showRing && modalContent()
    //     }
    // </Box>
}