taro/src/features/health/HeaderCircadian.tsx

import { View, Image, Text } from '@tarojs/components'
import './HeaderCircadian.scss'
import { useDispatch, useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { setShowActionTip } from '@/store/health';
import { getScenario } from './hooks/health_hooks';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import { rpxToPx } from '@/utils/tools';
import { IconActive, IconDay, IconEat, IconFast, IconNight, IconSleep } from '@/components/basic/Icons';
import { MainColorType } from '@/context/themes/color';

let lauchShow = false
let timer;
export default function HeaderCircadian() {
    const health = useSelector((state: any) => state.health);
    const dispatch = useDispatch()
    const [showTip, setShowTip] = useState(false)

    const [icon, setIcon] = useState('DAY')
    const [title, setTitle] = useState('')
    const [desc, setDesc] = useState('')
    const [isOG, setIsOG] = useState(false)
    const { t } = useTranslation()

    const kWidth = global.language == 'en' ? rpxToPx(236) : rpxToPx(176)

    useEffect(() => {
        if (health && health.windows && !lauchShow) {
            lauchShow = true
            checkTip()
        }
    }, [health])

    useEffect(() => {
        checkTip()
    }, [health.mode])

    function checkTip() {
        //启动时toast



        if (health && health.windows) {
            setShowTip(true)
            setIcon(health.mode)

            if (timer) {
                clearTimeout(timer)
                timer = null
            }
            timer = setTimeout(() => {
                setShowTip(false)
                dispatch(setShowActionTip({
                    isShow: false,
                    isCompleted: false
                }))
            }, 3000)

            // lauchShow = true
            const scenario = getScenario(health.windows, health.mode)
            if (scenario.real || scenario.status == 'OG') {
                setIsOG(true)

                switch (health.mode) {
                    case 'FAST':
                        setTitle(t('health.fasting_log'))
                        break
                    case 'EAT':
                        setTitle(t('health.meal_log'))
                        break
                    case 'SLEEP':
                        setTitle(t('health.sleep_log'))
                        break
                    case 'ACTIVE':
                        setTitle(t('health.active_log'))
                        break
                }
                setDesc(t('health.in_progress'))

                return;
            }
            else {
                if (new Date().getTime() >= scenario.target.start_timestamp && new Date().getTime() < scenario.target.end_timestamp) {
                    setDesc(t('health.live_now'))
                }
                else {
                    setDesc(t('health.next_up'))
                }
            }
            switch (health.mode) {
                case 'FAST':
                    {
                        setTitle(t('health.fasting_schedule'))
                    }
                    break;
                case 'EAT':
                    {
                        setTitle(t('health.eating_schedule'))
                    }
                    break;
                case 'SLEEP':
                    {
                        setTitle(t('health.sleep_schedule'))
                    }
                    break;
                case 'ACTIVE':
                    {
                        setTitle(t('health.active_schedule'))
                    }
                    break;
                case 'DAY':
                    {
                        setTitle(t('health.daytime'))
                    }
                    break;
                case 'NIGHT':
                    {
                        setTitle(t('health.nighttime'))
                    }
                    break;
            }

            setIsOG(false)


        }
    }

    useEffect(() => {
        if (health.showActionCircadian) {
            checkTip()
            // const scenario = getScenario(health.windows, health.mode)
            // setIsOG(scenario.status == 'OG')
            // var isLiveNow = new Date().getTime() >= scenario.target.start_timestamp && new Date().getTime() < scenario.target.end_timestamp
            // setDesc(scenario.status == 'OG' ? t('health.in_progress') : isLiveNow ? t('health.live_now') : t('health.next_up'))
            // switch (health.mode) {
            //     case 'FAST':
            //         {
            //             setIcon('FAST')
            //             setTitle(scenario.status == 'OG' ? t('health.fasting_log') : t('health.fasting_schedule'))


            //         }
            //         break;
            //     case 'EAT':
            //         {
            //             setIcon('EAT')
            //             setTitle(scenario.status == 'OG' ? t('health.meal_log') : t('health.eating_schedule'))
            //             // setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
            //         }
            //         break;
            //     case 'SLEEP':
            //         {
            //             setIcon('SLEEP')
            //             setTitle(scenario.status == 'OG' ? t('health.sleep_log') : t('health.sleep_schedule'))
            //             // setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
            //         }
            //         break;
            //     case 'ACTIVE':
            //         {
            //             setIcon('ACTIVE')
            //             setTitle(scenario.status == 'OG' ? t('health.active_log') : t('health.active_schedule'))
            //             // setDesc(health.isCompleted ? 'COMPLETED' : t('health.in_progress'))
            //         }
            //         break;
            // }
            // setShowTip(true)
            // if (timer) {
            //     clearTimeout(timer)
            //     timer = null
            // }
            // timer = setTimeout(() => {
            //     setShowTip(false)
            //     dispatch(setShowActionTip({
            //         isShow: false,
            //         isCompleted: false
            //     }))
            // }, 3000)
        }
    }, [health.showActionCircadian])

    useEffect(() => {
        setInterval(() => {
            if (health.windows) {
                const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
                const day = getScenario(health.windows, 'DAY')
                const night = getScenario(health.windows, 'NIGHT')
                const fast = getScenario(health.windows, 'FAST')
                const eat = getScenario(health.windows, 'EAT')
                const sleep = getScenario(health.windows, 'SLEEP')
                const active = getScenario(health.windows, 'ACTIVE')
                var isShow = false
                if (dayjs(day.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('DAY')
                    setTitle(t('health.daytime'))
                }
                else if (dayjs(night.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('NIGHT')
                    setTitle(t('health.nighttime'))
                }
                else if (dayjs(fast.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('FAST')
                    setTitle(t('health.fasting_schedule'))
                }
                else if (dayjs(eat.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('EAT')
                    setTitle(t('health.eating_schedule'))
                }
                else if (dayjs(sleep.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('SLEEP')
                    setTitle(t('health.sleep_schedule'))
                }
                else if (dayjs(active.target.start_timestamp).format('YYYY-MM-DD HH:mm:ss') == now) {
                    isShow = true;
                    setIcon('ACTIVE')
                    setTitle(t('health.active_schedule'))
                }
                if (isShow) {
                    setDesc(t('health.live_now'))
                    setShowTip(true)
                    if (timer) {
                        clearTimeout(timer)
                        timer = null
                    }
                    timer = setTimeout(() => {
                        setShowTip(false)
                        dispatch(setShowActionTip({
                            isShow: false,
                            isCompleted: false
                        }))
                    }, 3000)
                }
            }
        }, 1000)
    }, [])

    function leftIcon() {
        var bgColor = 'transparent'
        switch (icon) {
            case 'FAST':
                if (isOG) bgColor = MainColorType.fast
                break
            case 'EAT':
                if (isOG) bgColor = MainColorType.eat
                break
            case 'SLEEP':
                if (isOG) bgColor = MainColorType.sleep
                break
            case 'ACTIVE':
                if (isOG) bgColor = MainColorType.active
                break
        }



        return <View className='circadian_icon' style={{ backgroundColor: bgColor }}>
            {
                icon == 'DAY' && <IconDay width={rpxToPx(36)} color={MainColorType.day} />
            }
            {
                icon == 'NIGHT' && <IconNight width={rpxToPx(36)} color={MainColorType.night} />
            }
            {
                icon == 'FAST' && <IconFast width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.fast} />
            }
            {
                icon == 'SLEEP' && <IconSleep width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.sleep} />
            }
            {
                icon == 'EAT' && <IconEat width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.eat} />
            }
            {
                icon == 'ACTIVE' && <IconActive width={rpxToPx(36)} color={isOG ? MainColorType.black : MainColorType.active} />
            }
        </View>
    }

    function contentColor() {
        switch (icon) {
            case 'FAST':
                if (isOG) return MainColorType.fast
                break
            case 'EAT':
                if (isOG) return MainColorType.eat
                break
            case 'SLEEP':
                if (isOG) return MainColorType.sleep
                break
            case 'ACTIVE':
                if (isOG) return MainColorType.active
                break
        }
        return MainColorType.g02
    }

    return <View className='circadian_bg' style={{ opacity: showTip ? 1 : 0 }}>
        {
            leftIcon()
        }
        {/* <Image src={icon} className='circadian_icon' style={{ opacity: lowLight ? 0.7 : 1.0 }} /> */}
        <View className='circadian_content' style={{ width: kWidth }}>
            <View className='circadian_name'>{title}</View>
            <View className='circadian_status' style={{ color: contentColor() }}>{desc}</View>
        </View>
    </View>
}