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 { MainColorType } from "@/context/themes/color";
import { useDispatch, useSelector } from "react-redux";
import { WindowStatusType, WindowType } from "@/utils/types";
import { durationArc, isCurrentTimeInRange, startArc } from "./util";
import { setMode } from "@/store/health";
import { getScenario, getWindowStatus } from "./hooks/health_hooks";
import { useTranslation } from "react-i18next";

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

    const user = useSelector((state: any) => state.user);
    const health = useSelector((state: any) => state.health);
    const dispatch = useDispatch()
    const {t} = useTranslation()


    useEffect(() => {
        if (health.mode == 'SLEEP') {
            setIsSleepMode(true)
        }
        else if (health.mode == 'ACTIVE') {
            setIsSleepMode(false)
        }
    }, [health.mode])

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


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

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

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

    const bgRing: BgRing = {
        color: MainColorType.ringBg
    }

    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 targetRing() {
        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
        const startArc = getArc()
        const durationArc = getTargetArc()

        return {
            color,
            startArc,
            durationArc
        }
    }

    function getRealArc(time) {
        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 getRealDurationArc(start, end) {
        var duration = (end - start) / 1000;
        return duration / (24 * 3600) * 2 * Math.PI;
    }

    function realRing() {
        const status = getWindowStatus(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')
        const scenario = getScenario(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')

        if (status == WindowStatusType.upcoming) {
            return null;
            // return {
            //     color: '#cccccc',
            //     startArc: getRealArc(new Date().getTime()),
            //     durationArc: getRealDurationArc(new Date().getTime(), scenario.target.start_timestamp),
            // }
        }
        return {
            color: isSleepMode ? MainColorType.sleep : MainColorType.active,
            startArc: getRealArc(scenario.target.start_timestamp),
            durationArc: getRealDurationArc(scenario.target.start_timestamp, new Date().getTime())
        }
    }

    function currentDot() {
        if (health.mode == 'SLEEP' || health.mode == 'ACTIVE') {
            const status = getWindowStatus(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')

            return {
                color: status == WindowStatusType.upcoming?'#B2B2B2':isSleepMode ? MainColorType.sleep : MainColorType.active,
                lineWidth: 4,
                borderColor: '#F5F5F5',
                offset: 0
            }
        }
        return null;
    }

    function showDotAnimation(){
        if (health.mode == 'SLEEP' || health.mode == 'ACTIVE') {
            const status = getWindowStatus(health.windows, isSleepMode ? 'SLEEP' : 'ACTIVE')
            if (status == WindowStatusType.process) return true;
        }

        return false
    }

    function ring() {


        return <Rings
            common={common}
            bgRing={bgRing}
            targetRing={targetRing()}
            realRing={realRing()}
            canvasId={'smal11lee' + props.id}
            currentDot={currentDot()}
            scale={props.scale ?? 1.0}
            showCurrentDotAnimation={showDotAnimation()}
            />
    }

    return <View style={{ width: rpxToPx(634 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }} onClick={() => props.onClick()}>
        <View style={{ position: 'relative', alignItems: 'center', display: 'flex', flexDirection: 'column' }}>
            <View className="demo_scale">
                {
                    ring()
                }
            </View>
            <View className={health.selTab == 2 ? 'window_name window_name_sel' : 'window_name'}>{isSleepMode ? t('health.sleep') : t('health.active')}</View>
        </View>
    </View>
}