taro/src/features/daynight/DayNightStatus.tsx

import { View } from "@tarojs/components";
import './DayNightStatus.scss'
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";

export default function DayNightStatus(props: { authInfo: any, isNight: boolean, sunset_ts: number, sunrise_ts: number }) {
    const { t } = useTranslation()
    //ongoing //wfs //ended //completed
    function status() {
        if (props.isNight) {
            if (props.authInfo && props.authInfo.day_completed && new Date().getTime() > props.authInfo.day_completed.sunset_ts) {
                return 'completed'
            }
            if (props.authInfo && props.authInfo.night_completed && new Date().getTime() > props.authInfo.night_completed.sunrise_ts) {
                return 'ended'
            }
            if (props.sunset_ts < new Date().getTime()) {
                return 'ongoing'
            }
            return 'wait_for_start'

        }
        if (props.authInfo && props.authInfo.day_completed && new Date().getTime() > props.authInfo.day_completed.sunset_ts) {
            return 'completed'
        }
        if (props.sunrise_ts < new Date().getTime()) {
            return 'ongoing'
        }
        return 'wait_for_start'
    }

    if (status() == 'wait_for_start') {
        return <View className="day_night_status"
            style={{ backgroundColor: props.isNight ? ColorType.night + '66' : ColorType.day + '66', color: props.isNight ? ColorType.night : ColorType.day }}
        >{t('feature.day_night.upcoming')}</View>
    }
    if (status() == 'ongoing') {
        return <View className="day_night_status"
            style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#000' }}
        >{t('feature.day_night.in_real_time')}</View>
    }
    if (status() == 'ended') {
        return <View className="day_night_status"
            style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#000' }}
        >{t('feature.day_night.ended')}</View>
    }
    return <View className="day_night_status"
        style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: '#FA5151' }}
    >{t('feature.day_night.last_updated')}</View>
}