taro/src/_health/components/fast_sleep_card.tsx

import { View, Text } from '@tarojs/components'
import './fast_sleep_card.scss'
import { rpxToPx } from '@/utils/tools'
import { MainColorType } from '@/context/themes/color';
import { TimeFormatter } from '@/utils/time_format';
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { getDurationArc, getStartArc, getThemeColor } from '@/features/health/hooks/health_hooks';
import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import StatusIndicator, { StatusType } from '../base/status_indicator';
import { IconCheck, IconCircle, IconMiss } from '@/components/basic/Icons';

export default function FastSleepCard(props: { step: number, data: any }) {
    const health = useSelector((state: any) => state.health);
    const { t } = useTranslation()

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

    const common2: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 31,
        lineWidth: 14,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

    const common3: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 40,
        lineWidth: 14,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

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

    function target0BigRing() {
        const { fast } = props.data
        return {
            color: MainColorType.fastLight,
            startArc: getStartArc(fast.target.start_timestamp),
            durationArc: getDurationArc(fast.target.start_timestamp, fast.target.end_timestamp)
        }
    }

    function target0SmallRing() {
        const { sleep } = props.data
        if (sleep.real && sleep.real.end_timestamp) {
            return {
                color: MainColorType.sleepLight,
                startArc: getStartArc(sleep.real.start_timestamp),
                durationArc: getDurationArc(sleep.real.start_timestamp, sleep.real.end_timestamp)
            }
        }

        return {
            color: MainColorType.sleepLight,
            startArc: getStartArc(sleep.target.start_timestamp),
            durationArc: getDurationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
        }
    }



    function target1BigRing() {
        const { fast, sleep, status } = props.data
        if (status == 'OG2_NO1') {
            var fastStarttoSleepDuration = 0
            var time1 = sleep.period.start_time
            var time2 = fast.period.start_time

            var t1 = parseInt(time1.split(':')[0]) * 60 + parseInt(time1.split(':')[1])
            var t2 = parseInt(time2.split(':')[0]) * 60 + parseInt(time2.split(':')[1])
            fastStarttoSleepDuration = t1 - t2 > 0 ? (t1 - t2) * 60 * 1000 : (t1 - t2) * 60 * 1000 + 24 * 3600 * 1000

            return {
                color: MainColorType.fastLight,
                startArc: getStartArc(fast.target.start_timestamp),
                durationArc: getDurationArc(fast.target.start_timestamp, fast.target.start_timestamp + fastStarttoSleepDuration)
            }
            // var now = new Date().getTime()
            // return TimeFormatter.calculateTimeDifference(now, now + fastStarttoSleepDuration)
        }
        return {
            color: MainColorType.fastLight,
            startArc: getStartArc(fast.target.start_timestamp),
            durationArc: getDurationArc(fast.target.start_timestamp, sleep.target.start_timestamp)
        }
    }

    function target2BigRing() {
        const { sleep } = props.data
        if (sleep.real && sleep.real.end_timestamp) {
            return {
                color: MainColorType.sleepLight,
                startArc: getStartArc(sleep.real.start_timestamp),
                durationArc: getDurationArc(sleep.real.start_timestamp, sleep.real.end_timestamp)
            }
        }
        return {
            color: MainColorType.sleepLight,
            startArc: getStartArc(sleep.target.start_timestamp),
            durationArc: getDurationArc(sleep.target.start_timestamp, sleep.target.end_timestamp)
        }
    }

    function target3BigRing() {
        const { fast, sleep, status } = props.data
        if (status == 'OG2_NO1') {
            var time1 = fast.period.end_time
            var time2 = sleep.period.end_time
            var duration = 0

            var t1 = parseInt(time1.split(':')[0]) * 60 + parseInt(time1.split(':')[1])
            var t2 = parseInt(time2.split(':')[0]) * 60 + parseInt(time2.split(':')[1])
            duration = t1 - t2 >= 0 ? (t1 - t2) * 60 * 1000 : (t1 - t2) * 60 * 1000 + 24 * 3600 * 1000

            return {
                color: MainColorType.fastLight,
                startArc: getStartArc(fast.target.end_timestamp - duration),
                durationArc: getDurationArc(fast.target.end_timestamp - duration, fast.target.end_timestamp)
            }

        }

        return {
            color: MainColorType.fastLight,
            startArc: getStartArc(status == 'OG3' ? sleep.real.end_timestamp : sleep.target.end_timestamp),
            durationArc: getDurationArc(status == 'OG3' ? sleep.real.end_timestamp : sleep.target.end_timestamp, fast.target.end_timestamp)
        }
    }

    function real0BigRing() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS') {
            if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp)
                return {
                    color: MainColorType.fast,
                    startArc: getStartArc(fast.target.start_timestamp),
                    durationArc: getDurationArc(fast.target.start_timestamp, new Date().getTime())
                }
            return null
        }
        if (status == 'OG2_NO1') {
            return null;
        }
        return {
            color: MainColorType.fast,
            startArc: getStartArc(fast.real.start_timestamp),
            durationArc: getDurationArc(fast.real.start_timestamp, new Date().getTime())
        }
    }

    function real0SmallRing() {
        const { sleep } = props.data
        if (!sleep.real) {
            return null;
        }
        if (sleep.real.end_timestamp) {
            return {
                color: MainColorType.sleep,
                startArc: getStartArc(sleep.real.start_timestamp),
                durationArc: getDurationArc(sleep.real.start_timestamp, sleep.real.end_timestamp)
            }
        }
        return {
            color: MainColorType.sleep,
            startArc: getStartArc(sleep.real.start_timestamp),
            durationArc: getDurationArc(sleep.real.start_timestamp, new Date().getTime())
        }
    }

    function real1BigRing() {
        const { fast, sleep, status } = props.data
        if (fast.real) {
            if (status == 'OG1') {
                return {
                    color: MainColorType.fast,
                    startArc: getStartArc(fast.real.start_timestamp),
                    durationArc: getDurationArc(fast.real.start_timestamp, new Date().getTime())
                }
            }
            return {
                color: MainColorType.fast,
                startArc: getStartArc(fast.real.start_timestamp),
                durationArc: getDurationArc(fast.real.start_timestamp, sleep.real.start_timestamp)
            }
        }
        return null;
    }
    function real2BigRing() {
        const { sleep } = props.data
        if (!sleep.real) {
            return null;
        }
        return {
            color: MainColorType.sleep,
            startArc: getStartArc(sleep.real.start_timestamp),
            durationArc: getDurationArc(sleep.real.start_timestamp, sleep.real.end_timestamp ? sleep.real.end_timestamp : new Date().getTime())
        }
    }
    function real3BigRing() {
        const { fast, sleep } = props.data
        if (!sleep.real || !sleep.real.end_timestamp) {
            return null;
        }
        return {
            color: MainColorType.fast,
            startArc: getStartArc(sleep.real.end_timestamp),
            durationArc: getDurationArc(sleep.real.end_timestamp, new Date().getTime())
        }
    }

    function currentDot(mode, outRange?: boolean) {
        return {
            color: outRange ? '#B2B2B2' : getThemeColor(mode),
            lineWidth: 4,
            borderColor: '#ffffff',
            offset: 0
        }

    }


    function circle0() {
        const { fast, sleep, status } = props.data
        var outRange = true
        var outRange2 = true
        if (fast.status == 'OG') {
            outRange = false
        }
        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
            outRange = false
        }

        if (sleep.status == 'OG') {
            outRange2 = false
        }
        else if (sleep.target.start_timestamp <= new Date().getTime() && new Date().getTime() < sleep.target.end_timestamp) {
            outRange2 = false
        }


        return <View style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', width: 114, height: 114,
            marginLeft: rpxToPx(50),
            marginTop: rpxToPx(86),
            position: 'relative',
        }}>
            <Rings common={common}
                bgRing={bgRing}
                targetRing={target0BigRing()}
                realRing={real0BigRing()}
                canvasId={'circle0_big'}
                currentDot={currentDot('FAST', outRange)}
            />

            <View style={{
                position: 'absolute',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }}>
                <Rings common={common2}
                    bgRing={bgRing}
                    targetRing={target0SmallRing()}
                    realRing={real0SmallRing()}
                    canvasId={'circle0_small'}
                    currentDot={currentDot('SLEEP', outRange2)}
                />
            </View>
        </View>

    }

    function circle1() {
        const { fast, sleep, status } = props.data
        var outRange = true
        if (fast.status == 'OG') {
            outRange = false
        }
        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
            outRange = false
        }
        return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
            bgRing={bgRing}
            targetRing={target1BigRing()}
            realRing={real1BigRing()}
            canvasId={'circle1_big'}
            currentDot={currentDot('FAST', outRange)}
        /></View>
    }

    function circle2() {
        const { fast, sleep, status } = props.data
        var outRange = true
        if (sleep.status == 'OG') {
            outRange = false
        }
        else if (sleep.target.start_timestamp <= new Date().getTime() && new Date().getTime() < sleep.target.end_timestamp) {
            outRange = false
        }
        return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
            bgRing={bgRing}
            targetRing={target2BigRing()}
            realRing={real2BigRing()}
            canvasId={'circle2_big'}
            currentDot={currentDot('SLEEP', outRange)}

        /></View>
    }

    function circle3() {
        const { fast, sleep, status } = props.data
        var outRange = true
        if (fast.status == 'OG') {
            outRange = false
        }
        else if (fast.target.start_timestamp <= new Date().getTime() && new Date().getTime() < fast.target.end_timestamp) {
            outRange = false
        }

        return <View style={{ display: 'flex', marginTop: rpxToPx(100), marginLeft: rpxToPx(70), alignItems: 'center', justifyContent: 'center', width: 96, height: 96, position: 'relative' }}> <Rings common={common3}
            bgRing={bgRing}
            targetRing={target3BigRing()}
            realRing={real3BigRing()}
            canvasId={'circle3_big'}
            currentDot={currentDot('FAST',outRange)}

        /></View>
    }

    function circleContent() {
        switch (props.step) {
            case 0:
                return circle0()
            case 1:
                return circle1()
            case 2:
                return circle2()
            case 3:
                return circle3()
        }
    }

    function statusBar() {
        var title = ''
        var hide = false;
        const { status } = props.data
        switch (props.step) {
            case 0:
                {
                    if (status == 'WFS') {
                        title = t('health.ready_for_logging')
                    }
                    else {
                        title = t('health.logging_progress')
                    }

                    return <View style={{
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center',
                        flexDirection: 'row',
                        left: rpxToPx(20),
                        top: rpxToPx(20),
                        opacity: hide ? 0 : 1
                    }}>
                        <StatusIndicator type={status == 'WFS' ? StatusType.normal : StatusType.ing}
                            color={status == 'OG2_NO1' || status == 'OG2' ? MainColorType.sleep : MainColorType.fast}
                            text={title}
                            fontColor={MainColorType.g01}
                            fontSize={rpxToPx(20)}
                        >
                            {/* {status == 'WFS' && <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />} */}
                        </StatusIndicator>
                    </View>
                    // else if (status == 'OG2_NO1') {
                    //     title = ''
                    //     hide = true
                    // }
                    // else {
                    //     title = 'In progress'
                    // }
                }
                break;
            case 1:
                {
                    title = t('health.stage1')
                    var type = StatusType.normal
                    var color: any = MainColorType.fast
                    var img: any = null
                    if (status == 'WFS') {
                        type = StatusType.img
                        color = 'transparent'
                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                    }
                    else if (status == 'OG1') {
                        type = StatusType.ing
                    }
                    else if (status == 'OG2_NO1') {
                        type = StatusType.img
                        color = MainColorType.error
                        img = <IconMiss width={rpxToPx(26)} color='#fff' />
                    }
                    else {
                        type = StatusType.img
                        img = <IconCheck width={rpxToPx(26)} height={rpxToPx(26)} color='#fff' />
                    }

                    return <View style={{
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center',
                        flexDirection: 'row',
                        left: rpxToPx(20),
                        top: rpxToPx(20),
                        opacity: hide ? 0 : 1
                    }}>
                        <StatusIndicator type={type}
                            color={color}
                            text={title}
                            fontColor={MainColorType.g01}
                            fontSize={rpxToPx(20)}
                        >
                            {
                                img
                            }
                        </StatusIndicator>
                    </View>

                }
                break;
            case 2:
                {
                    title = t('health.stage2')
                    // if (status == 'OG2') {
                    //     title = 'Stage 2 in progress'
                    // }
                    // else if (status == 'OG3' || status == 'OG2_NO1') {
                    //     title = 'Stage 2'
                    // }
                    // else {
                    //     title = 'Stage 2'
                    // }
                    var type = StatusType.normal
                    var img: any = null
                    var color: any = MainColorType.sleep
                    if (status == 'WFS' || status == 'OG1') {
                        type = StatusType.img
                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.sleep} />
                        color = 'transparent'
                    }
                    else if (status == 'OG2') {
                        type = StatusType.ing
                    }
                    else if (status == 'OG2_NO1') {
                        type = StatusType.ing
                        img = <IconMiss width={rpxToPx(26)} color='#fff' />
                    }
                    else {
                        type = StatusType.img
                        img = <IconCheck width={rpxToPx(26)} height={rpxToPx(26)} color='#fff' />
                    }

                    return <View style={{
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center',
                        flexDirection: 'row',
                        left: rpxToPx(20),
                        top: rpxToPx(20),
                        opacity: hide ? 0 : 1
                    }}>
                        <StatusIndicator type={type}
                            color={color}
                            text={title}
                            fontColor={MainColorType.g01}
                            fontSize={rpxToPx(20)}
                        >
                            {
                                img
                            }
                        </StatusIndicator>
                    </View>
                }
            case 3:
                {
                    title = t('health.stage3')
                    var type = StatusType.normal
                    var img: any = null
                    if (status == 'OG3') {
                        type = StatusType.ing
                    }
                    else if (status == 'OG2_NO1') {
                        type = StatusType.img
                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                    }
                    else {
                        type = StatusType.img
                        img = <IconCircle width={rpxToPx(26)} color={MainColorType.fast} />
                    }

                    return <View style={{
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center',
                        flexDirection: 'row',
                        left: rpxToPx(20),
                        top: rpxToPx(20),
                        opacity: hide ? 0 : 1
                    }}>
                        <StatusIndicator type={type}
                            color={status == 'OG3' ? MainColorType.fast : 'transparent'}
                            text={title}
                            fontColor={MainColorType.g01}
                            fontSize={rpxToPx(20)}
                        >
                            {
                                img
                            }
                        </StatusIndicator>
                    </View>
                    // if (status == 'OG3') {
                    //     title = 'Stage 3 in progress'
                    // }
                    // else if (status == 'OG2_NO1') {
                    //     title = 'Stage 3 pending start'
                    // }
                    // else {
                    //     title = 'Stage 3'
                    // }

                }
                break;
        }
        return <View style={{
            position: 'absolute',
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'row',
            left: rpxToPx(20),
            top: rpxToPx(20),
            opacity: hide ? 0 : 1
        }}>
            <View style={{
                width: rpxToPx(12),
                height: rpxToPx(12),
                borderRadius: rpxToPx(6),
                marginLeft: rpxToPx(10),
                marginRight: rpxToPx(10),
                backgroundColor: props.step == 2 ? MainColorType.sleep : MainColorType.fast
            }} />
            <View className='h20' style={{ color: MainColorType.g01 }}>{title}</View>
        </View>
    }

    function fastTime() {
        const { fast, status } = props.data
        if (status == 'WFS' || status == 'OG2_NO1') {
            var now = new Date().getTime()
            return TimeFormatter.calculateTimeDifference(now, now + fast.target.duration)
        }
        return TimeFormatter.countdown(fast.real.start_timestamp)
    }

    function sleepTime() {
        const { sleep, status } = props.data
        if (status == 'WFS' || status == 'OG1') {
            var now = new Date().getTime()
            return TimeFormatter.calculateTimeDifference(now, now + sleep.target.duration)
        }
        else if (status == 'OG3') {
            return TimeFormatter.calculateTimeDifference(sleep.real.start_timestamp, sleep.real.end_timestamp)
        }
        return TimeFormatter.countdown(sleep.real.start_timestamp)
    }

    function step1() {
        if (health.fast_with_sleep.status == 'OG2_MISALIGNED') {
            return 'Not Available'
        }
        const { fast, sleep, status } = props.data
        if (status == 'WFS') {
            return TimeFormatter.calculateTimeDifference(fast.target.start_timestamp, sleep.target.start_timestamp)
        }
        else if (status == 'OG1') {
            var now = new Date().getTime()
            return TimeFormatter.countdown(fast.real.start_timestamp)
        }
        else if (status == 'OG2_NO1') {
            var fastStarttoSleepDuration = 0
            var time1 = sleep.period.start_time
            var time2 = fast.period.start_time

            var t1 = parseInt(time1.split(':')[0]) * 60 + parseInt(time1.split(':')[1])
            var t2 = parseInt(time2.split(':')[0]) * 60 + parseInt(time2.split(':')[1])
            fastStarttoSleepDuration = t1 - t2 > 0 ? (t1 - t2) * 60 * 1000 : (t1 - t2) * 60 * 1000 + 24 * 3600 * 1000

            var now = new Date().getTime()
            return TimeFormatter.calculateTimeDifference(now, now + fastStarttoSleepDuration)
        }
        return TimeFormatter.calculateTimeDifference(fast.real.start_timestamp, sleep.real.start_timestamp)
    }

    function step2() {
        if (health.fast_with_sleep.status == 'OG2_MISALIGNED') {
            return 'Not Meaningful'
        }
        const { fast, sleep, status } = props.data
        if (status == 'OG2_NO1' || status == 'OG2') {
            return TimeFormatter.countdown(sleep.real.start_timestamp)
        }
        else if (status == 'OG3') {
            return TimeFormatter.calculateTimeDifference(sleep.real.start_timestamp, sleep.real.end_timestamp)
        }
        return TimeFormatter.calculateTimeDifference(sleep.target.start_timestamp, sleep.target.end_timestamp)
    }

    function step3() {
        const { fast, sleep, status } = props.data
        if (status == 'OG3') {
            return TimeFormatter.countdown(sleep.real.end_timestamp)
        }
        return diffentTime(sleep.period.end_time, fast.period.end_time)
    }

    function diffentTime(time2, time1) {
        var duration = 0

        var t1 = parseInt(time1.split(':')[0]) * 60 + parseInt(time1.split(':')[1])
        var t2 = parseInt(time2.split(':')[0]) * 60 + parseInt(time2.split(':')[1])
        duration = t1 - t2 >= 0 ? (t1 - t2) * 60 * 1000 : (t1 - t2) * 60 * 1000 + 24 * 3600 * 1000

        var now = new Date().getTime()
        return TimeFormatter.calculateTimeDifference(now, now + duration)
    }



    function statusDetail() {
        switch (props.step) {
            case 0:
                return <View className='right_content'>
                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fasting')}</View>
                    <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{fastTime()}</View>
                    <View style={{ height: rpxToPx(24) }} />
                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.sleep')}</View>
                    <View className='h36 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{sleepTime()}</View>
                </View>
            case 1:
                return <View className='right_content'>
                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_before_bed')}</View>
                    <View style={{ height: rpxToPx(12) }} />
                    <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step1()}</View>
                </View>
            case 2:
                return <View className='right_content'>
                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_while_sleep')}</View>
                    <View style={{ height: rpxToPx(12) }} />
                    <View className='h36 bold' style={{ color: MainColorType.sleep, lineHeight: rpxToPx(52) + 'px' }}>{step2()}</View>
                </View>
            case 3:
                return <View className='right_content'>
                    <View className='h34 ' style={{ lineHeight: rpxToPx(42) + 'px' }}>{t('health.fast_after_sleep')}</View>
                    <View style={{ height: rpxToPx(12) }} />
                    <View className='h36 bold' style={{ color: MainColorType.fast, lineHeight: rpxToPx(52) + 'px' }}>{step3()}</View>
                </View>
        }
        return <View className='right_content'></View>
    }

    return <View style={{
        position: 'relative', display: 'flex', flexDirection: 'row',
        height: rpxToPx(384),
        boxSizing: 'border-box'
    }}>
        {
            statusBar()
        }

        {
            circleContent()
        }
        <View style={{
            marginLeft: rpxToPx(36), height: props.step == 0 ? 114 : 96,
            marginTop: props.step == 0 ? rpxToPx(86) : rpxToPx(100),
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center'

        }}>
            {
                statusDetail()
            }
        </View>
    </View>
}