import { View, Text, Icon } from "@tarojs/components";
import './Stage.scss'
import { TimeFormatter } from "@/utils/time_format";
import { ColorType } from "@/context/themes/color";
import { IconRadio, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { useTranslation } from "react-i18next";

export default function Component(props: { data: any }) {
    const { t } = useTranslation()
    function getTime(t1: number, t2: number) {
        return TimeFormatter.formateTimeDifference(t1, t2)
    }

    function getDuration(t1: number, t2: number) {
        return TimeFormatter.calculateTimeDifference(t1, t2, true)
    }

    function getStepATime(obj) {
        if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
            return t('feature.track_time_duration.stage.not_completed')
        }

        return obj.status == 'ONGOING1' ?
            getTime(obj.fast.real_start_time, (new Date()).getTime()) :
            obj.sleep.real_start_time ? getDuration(obj.sleep.real_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time) :
                getDuration(obj.sleep.target_start_time, obj.fast.real_start_time ? obj.fast.real_start_time : obj.fast.target_start_time)
    }

    function getStepBTime(obj) {
        if (obj.status == 'ONGOING1') return t('feature.track_time_duration.stage.wait_for_start')
        if (obj.status == 'ONGOING2') return getTime(obj.sleep.real_start_time, (new Date()).getTime())
        if (obj.status == 'WAIT_FOR_START') return getDuration(obj.sleep.target_end_time, obj.sleep.target_start_time)
        if (obj.sleep.status == 'NOT_STARTED') return t('feature.track_time_duration.stage.not_started')
        if (obj.sleep.status == 'NOT_COMPLETED') return t('feature.track_time_duration.stage.not_completed')
        return getDuration(obj.sleep.real_end_time, obj.sleep.real_start_time)

    }

    function getStepCTime(obj) {
        if (obj.status == 'ONGOING1') return t('feature.track_time_duration.stage.wait_for_start')
        if (obj.status == 'ONGOING2') return t('feature.track_time_duration.stage.wait_for_start')
        if (obj.status == 'ONGOING3') return getTime(obj.sleep.real_end_time, (new Date()).getTime())
        if (obj.status == 'WAIT_FOR_START') return getDuration(obj.fast.target_end_time, obj.sleep.target_end_time)
        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return t('feature.track_time_duration.stage.not_started')
        return getDuration(obj.fast.real_end_time, obj.sleep.real_end_time)
    }
    function getStepAIcon(obj) {
        if (obj.status == 'COMPLETED' && obj.sleep.status == 'NOT_STARTED') {
            return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />;
        }
        return (obj.status == 'ONGOING1' || obj.status == 'WAIT_FOR_START') ?
            <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
            : <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
    }

    function getStepBIcon(obj) {
        var sleepColor = global.sleepColor ? global.sleepColor : ColorType.sleep
        if (obj.status == 'ONGOING1') return <IconRadio width={16} color={sleepColor} />
        if (obj.status == 'ONGOING2') return <IconRadio width={16} color={sleepColor} />
        if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={sleepColor} />
        if (obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={sleepColor} />
        if (obj.sleep.status == 'NOT_COMPLETED') return <IconRadioCross width={16} color={sleepColor} />
        return <IconRadioCheck width={16} color={sleepColor} />
    }

    function getStepCIcon(obj) {
        if (obj.status == 'ONGOING1') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
        if (obj.status == 'ONGOING2') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
        if (obj.status == 'ONGOING3') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
        if (obj.status == 'WAIT_FOR_START') return <IconRadio width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
        if (obj.sleep.status == 'NOT_COMPLETED' || obj.sleep.status == 'NOT_STARTED') return <IconRadioCross width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
        return <IconRadioCheck width={16} color={global.fastColor ? global.fastColor : ColorType.fast} />
    }

    return <View className="stage">

        <View className='timelineItem'>
            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                }
                <View className='timelineContentDetail'>
                    <View className="timeline-time" >{'  '}</View>
                </View>
            </View>
            <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1 }}>

                <Text>{t('feature.track_time_duration.stage.a')}</Text>
                <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepATime(props.data)}</View>

            </View>
            <View className='timeline_line1 line1_bottom_space' style={{ backgroundColor: props.data.status == 'ONGOING1' ? ColorType.fast : 'rgba(255,255,255,0.1)' }} />
            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    getStepAIcon(props.data)
                }
                <View className='timeline-line1'
                    style={{ background: '#ffffff00' }}
                />
            </View>

        </View>
        <View className='timelineItem'>
            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                }
                <View className='timelineContentDetail'>
                    <View className="timeline-time" >{'  '}</View>
                </View>
            </View>
            <View className="timeline-detail" style={{ color: ColorType.sleep, opacity: 1 }}>

                <Text>{t('feature.track_time_duration.stage.b')}</Text>
                <View className="timeline-date2" style={{ color: ColorType.sleep, opacity: 1 }}>{getStepBTime(props.data)}</View>

            </View>
            <View className='timeline_line1 line1_bottom_space' style={{ backgroundColor: props.data.status == 'ONGOING2' ? ColorType.sleep : 'rgba(255,255,255,0.1)' }} />
            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    getStepBIcon(props.data)
                }
                <View className='timeline-line1'
                    style={{ background: '#ffffff00' }}
                />
            </View>

        </View>
        <View className='timelineItem'>
            <View className='timelineContentView' style={{ background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    <Icon type='circle' size='16' color='#ffffff00' />//<CheckBox type={CheckBoxType.empty} opacity={0.4} />
                }
                <View className='timelineContentDetail'>
                    <View className="timeline-time" >{'  '}</View>
                </View>
            </View>
            <View className="timeline-detail" style={{ color: ColorType.fast, opacity: 1 }}>
                <Text>{t('feature.track_time_duration.stage.c')}</Text>
                <View className="timeline-date2" style={{ color: ColorType.fast, opacity: 1 }}>{getStepCTime(props.data)}</View>

            </View>
            <View className={'timeline_line1 line1_bottom_zero'} style={{ backgroundColor: props.data.status == 'ONGOING3' ? ColorType.fast : 'rgba(255,255,255,0.1)' }} />
            <View className='timeline-line-bg' style={{ width: 16, background: global.isDebug ? 'red' : 'transparent' }}>
                {
                    getStepCIcon(props.data)
                }
                <View className='timeline-line1'
                    style={{ background: '#ffffff00' }}
                />
            </View>
        </View>
        {/* <View className="stage_item">
            <Text className='stage_step'>A</Text>
            <View className="stage_line" style={{ opacity: props.data.status == 'ONGOING1' ? 1 : 0.4 }} />
            <View className="stage_right">
                <Text className="stage_title" style={{
                    color: props.data.status == 'ONGOING1' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>睡前断食</Text>
                <Text className="stage_value" style={{
                    color: props.data.status == 'ONGOING1' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>{getStepATime(props.data)}</Text>
            </View>

        </View> */}
        {/* <View className="stage_item">
            <Text className='stage_step'>B</Text>
            <View className="stage_line" style={{ opacity: props.data.status == 'ONGOING2' ? 1 : 0.4 }} />
            <View className="stage_right">
                <Text className="stage_title" style={{
                    color: props.data.status == 'ONGOING2' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>睡眠中断食</Text>
                <Text className="stage_value" style={{
                    color: props.data.status == 'ONGOING2' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>{getStepBTime(props.data)}</Text>
            </View>

        </View>
        <View className="stage_item">
            <Text className='stage_step'>C</Text>
            <View className="stage_line" style={{ opacity: props.data.status == 'ONGOING3' ? 1 : 0.4 }} />
            <View className="stage_right">
                <Text className="stage_title" style={{
                    color: props.data.status == 'ONGOING3' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>起床后断食</Text>
                <Text className="stage_value" style={{
                    color: props.data.status == 'ONGOING3' ?
                        global.fastColor ? global.fastColor : ColorType.fast : 'rgba(255, 255, 255, 0.8)'
                }}>{getStepCTime(props.data)}</Text>
            </View>

        </View> */}

    </View>
}