taro/src/features/health/MainDayNightCard.tsx

import { View, Text, ScrollView } from "@tarojs/components";
import './MainCard.scss'
import { useEffect, useState } from "react";
import { rpxToPx } from "@/utils/tools";
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot, RealRing } from "@/features/trackTimeDuration/components/Rings";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/en';
import momentT from 'moment';
// import moment from 'moment-timezone'
import { MainColorType } from "@/context/themes/color";
import { useDispatch, useSelector } from "react-redux";
import Calendar from "@/features/health/calendar";
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";
import { useRouter } from "@tarojs/taro";

let useActionSheet;
let useRoute;
let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
    useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
}

export default function MainDayNightCard(props: {
    count: number,
    typeChanged: Function,
    id: number,
    onClick: Function,
    scale: number
}) {
    const health = useSelector((state: any) => state.health);
    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }
    const { day } = health.windows.night_day
    const isTempDay = () => {
        if (router.params.window == 'DAY') {
            return true
        }
        if (router.params.window == 'NIGHT') {
            return false
        }
        if (isCurrentTimeInRange(day.period.start_time, day.period.end_time)) {
            return true
        }
        return false
    }
    
    const [isDayMode, setIsDayMode] = useState(isTempDay)
    const user = useSelector((state: any) => state.user);
    
    const dispatch = useDispatch();
    const {t} = useTranslation()

    useEffect(() => {
        const { day } = health.windows.night_day
        if (isCurrentTimeInRange(day.period.start_time, day.period.end_time)) {
            setIsDayMode(true)
        }
        else {
            setIsDayMode(false)
        }
    }, [])

    useEffect(() => {
        if (health.selTab == 0) {
            dispatch(setMode(isDayMode ? 'DAY' : 'NIGHT'))
        }
    }, [health.selTab, isDayMode])

    useEffect(() => {
        if (health.mode == 'DAY') {
            debugger
            setIsDayMode(true)
        }
        else if (health.mode == 'NIGHT') {
            setIsDayMode(false)
        }
    }, [health.mode])

    useEffect(() => {
        dayjs.locale(global.language == 'en' ? 'en' : 'zh-cn');
        require('moment/locale/en-gb')
        require('moment/locale/zh-cn')

        momentT.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')
        // moment.defineLocale(global.language == 'en' ? 'en-gb' : 'zh-cn', (momentT.localeData() as any)._config)
        // moment.locale(global.language == 'en' ? 'en-gb' : 'zh-cn')


    }, [props.count])

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

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

    function getTargetArc() {
        const { day, night } = health.windows.night_day
        if (isDayMode) {
            return durationArc(day.target.start_timestamp, day.target.end_timestamp)
        }
        return durationArc(night.target.start_timestamp, night.target.end_timestamp)
    }

    function getStartRealArc() {
        const { day, night } = health.windows.night_day
        const timestamp = new Date().getTime()
        if (isDayMode) {
            if (timestamp >= day.target.start_timestamp && timestamp <= day.target.end_timestamp)
                return startArc(day.target.start_timestamp)
        }
        else {
            if (timestamp >= night.target.start_timestamp && timestamp <= night.target.end_timestamp)
                return startArc(night.target.start_timestamp)
        }
        return startArc(timestamp)
    }

    function getRealArc() {
        const status = getWindowStatus(health.windows, isDayMode ? 'DAY' : 'NIGHT')
        if (status == WindowStatusType.upcoming) {
            const scenario = getScenario(health.windows, isDayMode ? 'DAY' : 'NIGHT')
            return durationArc(new Date().getTime(), scenario.target.start_timestamp)
        }
        const { day, night } = health.windows.night_day
        if (isDayMode) {
            return durationArc(day.target.start_timestamp, new Date().getTime())
        }
        return durationArc(night.target.start_timestamp, new Date().getTime())
    }

    function getArc() {
        const { day, night } = health.windows.night_day
        if (isDayMode) {
            return startArc(day.target.start_timestamp)
        }
        return startArc(night.target.start_timestamp)
    }

    function currentDot() {
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            const status = getWindowStatus(health.windows, isDayMode ? 'DAY' : 'NIGHT')

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

    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()
        }

        var targetColor: string = isDayMode ? MainColorType.dayLight : MainColorType.nightLight
        var realColor: string = isDayMode ? MainColorType.day : MainColorType.night
        const status = getWindowStatus(health.windows, isDayMode ? 'DAY' : 'NIGHT')
        if (status == WindowStatusType.upcoming) {
            realColor = '#CCCCCC'
        }

        const targetRing: TargetRing = {
            color: targetColor,
            startArc: getArc(),//-Math.PI / 2,
            durationArc: getTargetArc()
        }

        let realRing: RealRing = {
            color: realColor,
            startArc: getStartRealArc(),//-Math.PI / 2,
            durationArc: getRealArc()
        }

        if (status == WindowStatusType.upcoming){
            realRing = null
        }

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

    return <View onClick={() => props.onClick()} style={{ width: rpxToPx(634 / 3), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
        <View style={{ position: 'relative' }}>
            {
                ring()
            }
            <View className={health.selTab == 0 ? 'window_name window_name_sel' : 'window_name g01'}>{isDayMode ? t('health.window_day') : t('health.night')}</View>
        </View>
    </View>
}