taro/src/features/daynight/DayNightRing.tsx

import { View } from "@tarojs/components"
import { bigRingRadius, getBgRing, getCommon, getDot, ringWidth, thirdRingRadius } from "../trackTimeDuration/hooks/RingData";
import Rings from "@/features/trackTimeDuration/components/Rings";
import { RealRing } from '@/features/trackTimeDuration/components/Rings'
import { ColorType } from "@/context/themes/color";
import { useEffect, useState } from "react";
import { TimeFormatter } from "@/utils/time_format";
import dayjs from 'dayjs'


const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone')
dayjs.extend(utc)
dayjs.extend(timezone)

export default function DayNightRing(props: {
    isNight: boolean,
    isThirdRing: boolean,
    canvasId: any,
    authInfo: any
}) {
    const [authInfo, setAuthInfo] = useState(props.authInfo)


    useEffect(() => {
        setAuthInfo(props.authInfo)
    }, [props.authInfo])

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

        let realRingBig: RealRing = {
            color: ColorType.day + '66',
            startArc: 0,
            durationArc: 2
        }

        var now = new Date().getTime()

        if (authInfo && authInfo.day_completed && now > authInfo.day_completed.sunset_ts) {
            realRingBig.color = ColorType.day
            var duration = (authInfo.day_completed.sunset_ts - authInfo.day_completed.sunrise_ts) / 1000
            var time = authInfo.day_completed.sunrise
            time = time.substring(time.length - 8, time.length)
            var start = new Date('2024-01-01T' + time)
            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
            // if (!realRingBig.startArc){
            //     realRingBig = null
            // }
            debugger
            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} canvasId={props.canvasId} />

        }

        var sunRise = 6 * 60
        var sunSet = 18 * 60

        if (global.dayObj) {
            sunRise = parseInt(global.dayObj.sunrise.time.split(':')[0]) * 60 + parseInt(global.dayObj.sunrise.time.split(':')[1])
            sunSet = parseInt(global.dayObj.sunset.time.split(':')[0]) * 60 + parseInt(global.dayObj.sunset.time.split(':')[1])
        }


        var duration = sunSet - sunRise

        if (global.dayObj) {
            duration = (global.dayObj.sunset.timestamp - global.dayObj.sunrise.timestamp) / 60000
        }

        realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)

        if (authInfo && authInfo.timezone && authInfo.timezone.id) {
            var current1 = dayjs()
            var current = TimeFormatter.tzLocalTime(new Date().getTime(),authInfo.timezone.id)//dayjs().tz(authInfo.timezone.id)
            var offset = current.day() * 24 * 60 + current.hour() * 60 + current.minute() - current1.day() * 24 * 60 - current1.hour() * 60 - current1.minute()
            currentDot.offset = offset
        }
        var date = new Date(now)
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < sunRise) {
            minutes += 1440
        }

        currentDot.color = ColorType.day

        var t = date.getHours() * 60 + date.getMinutes()
        var duration2 = t - sunRise
        if (duration2 < 0) {
            duration2 += 24 * 60
        }

        if (global.dayObj) {
            if (global.dayObj.sunrise.timestamp < now && global.dayObj.sunset.timestamp > now) {
                duration2 = (now - global.dayObj.sunrise.timestamp) / 60000
            }
            else {
                duration2 = -1
            }
        }
        var realRing: RealRing = {
            color: ColorType.day,
            startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }
        if (duration2 == -1) {
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={realRing} currentDot={currentDot} canvasId={props.canvasId} />

    }

    function nightRing() {
        var common = getCommon(null, true)
        common.radius = props.isThirdRing ? thirdRingRadius : bigRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()

        let realRingBig: RealRing = {
            color: ColorType.night + '66',
            startArc: 0,
            durationArc: 2
        }

        var currentDot = getDot(null, false)
        currentDot.color = ColorType.night
        if (authInfo && authInfo.timezone && authInfo.timezone.id) {
            var current1 = dayjs()
            var current = TimeFormatter.tzLocalTime(new Date().getTime(),authInfo.timezone.id)//dayjs().tz(authInfo.timezone.id)
            var offset = current.date() * 24 * 60 + current.hour() * 60 + current.minute() - current1.date() * 24 * 60 - current1.hour() * 60 - current1.minute()
            currentDot.offset = offset
        }


        var now1 = new Date().getTime()
        if (authInfo && authInfo.timezone) {
            now1 = TimeFormatter.transferTimestamp(now1, authInfo.timezone.gmt)
        }

        if (authInfo && authInfo.night_completed && new Date().getTime() > authInfo.night_completed.sunrise_ts) {
            var isCompleted = false;
            if (authInfo.day_completed && new Date().getTime() > authInfo.day_completed.sunset_ts) {
                isCompleted = true
            }

            realRingBig.color = ColorType.night
            var duration = (authInfo.night_completed.sunrise_ts - authInfo.night_completed.sunset_ts) / 1000
            var time = authInfo.night_completed.sunset
            time = time.substring(time.length - 8, time.length)
            var start = new Date('2024-01-01T' + time)

            realRingBig.startArc = (start.getHours() * 3600 + start.getMinutes() * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
            realRingBig.durationArc = (duration) / (24 * 3600) * 2 * Math.PI;
            //已结束未更新暂停时，显示current_dot
            if (isCompleted) {
                currentDot = null
            }
            // if (!realRingBig.startArc){
            //     realRingBig = null
            // }
            return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} currentDot={currentDot} canvasId={props.canvasId} />

        }

        var sunRise = 24 * 60 + 6 * 60
        var sunSet = 18 * 60

        if (global.nightObj) {
            sunRise = 24 * 60 + parseInt(global.nightObj.sunrise.time.split(':')[0]) * 60 + parseInt(global.nightObj.sunrise.time.split(':')[1])
            sunSet = parseInt(global.nightObj.sunset.time.split(':')[0]) * 60 + parseInt(global.nightObj.sunset.time.split(':')[1])
        }
        var duration = sunRise - sunSet

        if (global.nightObj) {
            duration = (global.nightObj.sunrise.timestamp - global.nightObj.sunset.timestamp) / 60000
            // if (global.nightObj.sunrise.timestamp-new Date().getTime()>48*3600*1000){
            //     duration = 24*60
            // }
        }

        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var now = new Date()


        var t1 = now.getHours() * 60 + now.getMinutes()
        var duration2 = t1 - sunSet
        if (duration2 < 0) {
            duration2 += 24 * 60
        }

        if (global.nightObj) {
            if (global.nightObj.sunset.timestamp < now.getTime() && global.nightObj.sunrise.timestamp > now.getTime()) {
                duration2 = (now.getTime() - global.nightObj.sunset.timestamp) / 60000
            }
            else {
                duration2 = -1
            }
        }
        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 (duration2 == -1) {
            realRing = null;
        }

        // if (night.nightRingDate) {
        //     if (new Date(night.nightRingDate).getDate() == now.getDate() && now.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.canvasId} />

    }

    return props.isNight ? nightRing() : dayRing()
}