taro/src/features/trackTimeDuration/components/StatusIndicator.tsx

import { View, Text } from "@tarojs/components";
import './StatusIndicator.scss'
import { useSelector } from "react-redux";
import { ColorType } from "@/context/themes/color";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

export default function Component() {
    const time = useSelector((state: any) => state.time);
    const user = useSelector((state: any) => state.user);
    const {t} = useTranslation()

    function getFastName() {
        var strName = t('feature.track_time_duration.status_indicator.fast_wait_for_start')//'断食'
        switch (time.scenario) {
            case 'FAST':
                {
                    if (time.status == 'ONGOING') {
                        strName = t('feature.track_time_duration.status_indicator.fast_ongoing')//'断食进行中'
                    }
                }
                break;
            case 'SLEEP':
                break;
            case 'FAST_SLEEP':
                {
                    switch (time.status) {
                        case 'ONGOING1':
                        case 'ONGOING2':
                        case 'ONGOING3':
                            strName = t('feature.track_time_duration.status_indicator.fast_ongoing')//'断食进行中'
                            break;
                    }
                }
                break;
        }

        return strName
    }



    function sleepAlpha() {
        return time.status == 'ONGOING3' ? 0.4 : 1
    }

    function getSleepName() {
        var strName = t('feature.track_time_duration.status_indicator.sleep_wait_for_start')//'睡眠'
        switch (time.scenario) {
            case 'FAST':
                break;
            case 'SLEEP':
                {
                    if (time.status == 'ONGOING') {
                        strName = t('feature.track_time_duration.status_indicator.sleep_ongoing')//'睡眠进行中'
                    }
                }
                break;
            case 'FAST_SLEEP':
                {
                    switch (time.status) {
                        case 'ONGOING1':
                            strName = t('feature.track_time_duration.status_indicator.sleep_ongoing1')//'睡眠待开始'
                            break;
                        case 'ONGOING2':
                            strName = t('feature.track_time_duration.status_indicator.sleep_ongoing')//'睡眠进行中'
                            break;
                        case 'ONGOING3':
                            strName = t('feature.track_time_duration.status_indicator.sleep_ongoing3')//'睡眠已结束'
                            break;
                    }
                }
                break;
        }
        return strName
    }

    if (!time.scenario) {
        return <View className='subcontent'>
            <View className='scenario' style={{backgroundColor:global.isDebug?'red':'transparent'}}>
                <View className='point' style={{ backgroundColor: global.fastColor ? global.fastColor : ColorType.fast }} />
                <Text className='name'>{getFastName()}</Text>
            </View>
        </View>
    }
    if (!user.isLogin) {
        return <View className='subcontent'  >
            <View className='scenario' style={{backgroundColor:global.isDebug?'red':'transparent'}}>
                <View className='point' style={{ backgroundColor: global.fastColor ? global.fastColor : ColorType.fast }} />
                <Text className='name'>{getFastName()}</Text>
            </View>
        </View>
    }

    return <View className='subcontent'>
        {
            time.scenario != 'SLEEP' && <View className='scenario' style={{backgroundColor:global.isDebug?'red':'transparent'}}>
                <View className='point' style={{ backgroundColor: global.fastColor ? global.fastColor : ColorType.fast }} />
                <Text className='name'>{getFastName()}</Text>
            </View>
        }
        {
            time.scenario != 'FAST' && <View className='scenario' style={{ opacity: sleepAlpha() }}>
                <View className='point' style={{ backgroundColor: global.sleepColor ? global.sleepColor : ColorType.sleep }} />
                <Text className='name'>{getSleepName()}</Text>
            </View>
        }

    </View>
}