taro/src/features/health/MainSleepActiveCard.tsx

import { View, Text } from "@tarojs/components";
import './MainCard.scss'
import { useEffect, useState } from "react";
import { rpxToPx } from "@/utils/tools";
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import dayjs from "dayjs";
import moment from 'moment-timezone'
import { MainColorType } from "@/context/themes/color";
import { useDispatch, useSelector } from "react-redux";
import { sleepWindow } from "@/services/trackTimeDuration";
import { WindowType } from "@/utils/types";
import { durationArc, isCurrentTimeInRange, startArc } from "./util";
import { setMode } from "@/store/health";
import { IconSwitch1, IconSwitch2 } from "@/components/basic/Icons";

export default function MainSleepActiveCard(props: { count: any, typeChanged: Function }) {
    const [isSleepMode, setIsSleepMode] = useState(true)

    const startScheduleTime = '19:00'
    const endScheduleTime = '06:00'

    const user = useSelector((state: any) => state.user);
    const health = useSelector((state: any) => state.health);
    const dispatch = useDispatch()

    useEffect(() => {
        const { sleep } = health.windows.sleep_active
        if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
            setIsSleepMode(true)
        }
        else {
            setIsSleepMode(false)
        }
    }, [health.windows])


    useEffect(() => {
    }, [user.isLogin])

    useEffect(() => {
        if (health.selTab == 2) {
            dispatch(setMode(isSleepMode ? 'SLEEP' : 'ACTIVE'))
        }
    }, [health.selTab, isSleepMode])

    function formatTime(format: string, timestamp?: number) {

        return dayjs().format(format)
    }

    function switchMode() {
        var mode = !isSleepMode;
        setIsSleepMode(mode)
        props.typeChanged(mode ? WindowType.sleep : WindowType.active)
    }

    const common: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 115,
        lineWidth: 26,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

    const bgRing: BgRing = {
        color: '#EAE9E9'
    }

    function getArc() {
        const { sleep, active } = health.windows.sleep_active
        if (isSleepMode) {
            return startArc(sleep.target.start_timestamp)
        }
        return startArc(active.target.start_timestamp)
    }

    function getTargetArc() {
        const { sleep, active } = health.windows.sleep_active
        if (isSleepMode) {
            return durationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
        }
        return durationArc(active.target.start_timestamp, active.target.end_timestamp)
    }

    function getRealArc() {
        const { sleep, active } = health.windows.sleep_active
        if (isSleepMode) {
            return durationArc(sleep.target.start_timestamp, new Date().getTime())
        }
        return durationArc(active.target.start_timestamp, new Date().getTime())
    }

    function targetRing() {
        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
        const startArc = getArc()
        const durationArc = getTargetArc()

        return {
            color,
            startArc,
            durationArc
        }
    }

    function realRing() {
        const color = isSleepMode ? MainColorType.sleep : MainColorType.active
        const { sleep, active } = health.windows.sleep_active
        if (isSleepMode) {
            if (!isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
                return null
            }
        }
        else {
            if (!isCurrentTimeInRange(active.period.start_time, active.period.end_time)) {
                return null
            }
        }
        return {
            color: color,
            startArc: getArc(),//-Math.PI / 2,
            durationArc: getRealArc()
        }
        // if (isSleepMode) {
        //     if (isCurrentTimeInRange(startScheduleTime, endScheduleTime)) {
        //         var starts: any = startScheduleTime.split(':')
        //         const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')

        //         const color = MainColorType.sleep
        //         const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
        //         var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()

        //         const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
        //         const durationArc = fastCount / 1440 * 2 * Math.PI

        //         return {
        //             color,
        //             startArc,
        //             durationArc
        //         }
        //     }
        // }
        // else {
        //     if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
        //         var starts: any = endScheduleTime.split(':')
        //         const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')

        //         const color = MainColorType.active
        //         const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
        //         var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()

        //         const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
        //         const durationArc = fastCount / 1440 * 2 * Math.PI

        //         return {
        //             color,
        //             startArc,
        //             durationArc
        //         }
        //     }
        // }
    }

    function ring() {
        var offset = 0

        var hour = new Date().getHours()
        var minute = new Date().getMinutes()

        if (hour != new Date().getHours() || minute != new Date().getMinutes()) {
            offset = hour * 60 + minute - new Date().getHours() * 60 - new Date().getMinutes()
        }

        const currentDot: CurrentDot = {
            color: isSleepMode ? MainColorType.sleep : MainColorType.active,
            lineWidth: 10,
            borderColor: '#fff',
            offset: offset,
            whiteIcon: true
        }

        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11lee'} />
    }

    function switchIcon() {
        const { sleep } = health.windows.sleep_active
        if (isSleepMode) {
            if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
                return <IconSwitch1 color="#000" width={15} />
            }
            return <IconSwitch2 color="#fff" width={15} />
        }
        if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
            return <IconSwitch2 color="#fff" width={15} />
        }
        return <IconSwitch1 color="#000" width={15} />
    }

    function switchBtn() {
        var bgColor = ''
        const { sleep } = health.windows.sleep_active
        if (isSleepMode) {
            if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
                bgColor = '#fff'
            }
            else {
                bgColor = MainColorType.active
            }

        }
        else {
            if (isCurrentTimeInRange(sleep.period.start_time, sleep.period.end_time)) {
                bgColor = MainColorType.sleep
            }
            else {
                bgColor = '#fff'
            }
        }
        return <View className="switch_btn" style={{ backgroundColor: bgColor }} onClick={switchMode}>
            {
                switchIcon()
            }
        </View>
    }

    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
        <View style={{ position: 'relative', }}>
            {
                ring()
            }
            <View className="ring_center">
                <Text className="time1">{formatTime('HH:mm:ss')}</Text>
                <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
            </View>
        </View>

        {
            switchBtn()
        }
    </View>
}