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

import { View, Text, Image, PageContainer } from '@tarojs/components'
import './IndexConsole.scss'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux';
import { endFast, endSleep, getLocalPush, startFast, startSleep, uploadLocalPushInfo } from "../actions/TrackTimeActions";
import { jumpPage } from '../hooks/Common';
import { useContext, useEffect, useRef, useState } from 'react';
import ConsolePicker from './ConsolePicker';
import LimitPickers from '@/components/input/LimitPickers';
import LimitTimeoutPickers from '@/components/input/LimitTimeoutPickers';
import { getColor, getTimePickerTitle } from '../hooks/Console';
import { isIOS, kIsIOS, rpxToPx, vibrate } from '@/utils/tools';
import { TimeFormatter } from '@/utils/time_format';
import Modal from '@/components/layout/Modal.weapp';
import Taro, { useDidShow } from '@tarojs/taro';
import { wxPubFollow } from '@/services/permission';
import { setWXFollow } from '@/store/permission';
import CircadianDetailPopup from './CircadianDetailPopup';
import showAlert from '@/components/basic/Alert';
import CheckAccess from './CheckAccess';
import { ColorType } from '@/context/themes/color';

let useNavigation;

let Linking,PushNotification;
let  checkNotification;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
    Linking = require('react-native').Linking;
    // JPush = require('jpush-react-native').default;
    PushNotification = require('react-native-push-notification')
    checkNotification = require('@/utils/native_permission_check').checkNotification;
}
let operateType = ''
let min = 0
let max = 0
let defaultTimestamp = 0
let isTimeout = false
let stageIndex = 0

let nativePushListener = null
export default function IndexConsole(props: { record: any, count: number }) {
    const user = useSelector((state: any) => state.user);
    const { status } = props.record.current_record;
    const currentRecord = props.record.current_record;
    const { t } = useTranslation()
    const [fastDuration, setFastDuration] = useState<number>(0);
    const [sleepDuration, setSleepDuration] = useState<number>(0);
    const [expand, setExpand] = useState(false);
    const permission = useSelector((state: any) => state.permission);
    const common = useSelector((state: any) => state.common);
    const [firstEnter, setFirstEnter] = useState(true);
    const [showTimePicker, setShowTimePicker] = useState(false);
    const dayMilliSeconds = 24 * 3600 * 1000;
    const [btnDisable, setBtnDisable] = useState(false)
    const [showStageModal, setShowStageModal] = useState(false)
    const dispatch = useDispatch();


    const limitPickerRef = useRef(null)

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useDidShow(() => {
        if (process.env.TARO_ENV == 'weapp') {
            wxPubFollow({ force_refresh: true }).then(res => {
                dispatch(setWXFollow((res as any).wx_pub_followed));
            })
        }

    })

    useEffect(() => {
        if (process.env.TARO_ENV == 'rn') {
            // console.error('current status',status)
            if (kIsIOS) {
                var Jto = require('react-native').NativeModules.NativeBridge;
                var NativeAppEventEmitter = require('react-native').NativeAppEventEmitter;
                Jto.getNotificationAuthStatus()
                if (nativePushListener){
                    (nativePushListener as any).remove()
                }
                nativePushListener = NativeAppEventEmitter.addListener('notificationReceive', (data) => {
                    console.log('notification receive action', data)
                    const { category_id, action_id,id } = data
                    uploadLocalPushInfo({
                        messageId:id
                    })
                    switch (action_id) {
                        case 'START_TIMER_NOW':
                            {
                                if (category_id == 'REMINDER_FS_START_FAST'){
                                    operateType = 'startFast'
                                }
                                else {
                                    operateType = 'startSleep'
                                }
                                global.set_time = new Date().getTime()
                                pickerConfirm(new Date().getTime())
                            }
                            break;
                        case 'PICK_EARLIER_START':
                            {
                                if (category_id == 'REMINDER_FS_START_FAST'){
                                    tapStartFast(null)
                                }
                                else {
                                    tapStartSleep(null)
                                }
                            }
                            break;
                        case 'END_TIMER_NOW':
                            {
                                if (category_id == 'REMINDER_FS_END_FAST'){
                                    operateType = 'endFast'
                                }
                                else {
                                    operateType = 'endSleep'
                                }
                                global.set_time = new Date().getTime()
                                pickerConfirm(new Date().getTime())
                            }
                            break;
                        case 'PICK_EARLIER_END':
                            {
                                if (category_id == 'REMINDER_FS_END_FAST'){
                                    tapEndFast(null)
                                }
                                else {
                                    tapEndSleep(null)
                                }
                            }
                            break;
                        case 'SKIP':
                            break;
                    }
                })
            }
        }
    }, [props.record])

    useEffect(() => {
        if (currentRecord.fast) {
            var fastCount = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
            setFastDuration(fastCount)
        }

        if (currentRecord.sleep) {
            var sleepCount = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
            setSleepDuration(sleepCount)
        }
        if (props.record.current_record.status == 'WAIT_FOR_START') {
            setExpand(false)
        }

    }, [props.record])


    function tapStartFast(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        operateType = 'startFast'
        global.pauseIndexTimer = true
        global.set_time = new Date().getTime()

        defaultTimestamp = new Date().getTime()
        min = defaultTimestamp - 1 * 24 * 3600 * 1000
        max = defaultTimestamp
        isTimeout = false

        setShowTimePicker(true)
        // showPicker()
    }

    function tapStartSleep(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
            return
        }
        if (status != 'ONGOING1' && props.record.scenario.name == 'FAST_SLEEP') {
            if (status == 'WAIT_FOR_START') {
                Taro.showToast({
                    title: t('feature.track_time_duration.console.lock_fast_tip'),
                    icon: 'none'
                })
            }

            vibrate()
            return;
        }
        operateType = 'startSleep'
        global.pauseIndexTimer = true
        global.set_time = new Date().getTime()


        isTimeout = false
        if (props.record.scenario.name == 'SLEEP') {
            defaultTimestamp = new Date().getTime()
            min = defaultTimestamp - 6 * dayMilliSeconds
            max = defaultTimestamp
        }
        else {
            //todolist
            var now = new Date().getTime()
            var last_check_time = props.record.current_record.last_real_check_time
            if (now - last_check_time >= dayMilliSeconds) {
                //ongoing1 严重超时单独处理
                // var schedule_start_time = props.record.current_record.sleep.target_start_time
                // defaultTimestamp = Math.min(now, schedule_start_time)
                // min = Math.max(last_check_time, schedule_start_time - 3 * dayMillionSeconds)
                // max = Math.min(now, schedule_start_time + 3 * dayMillionSeconds)
                defaultTimestamp = now
                min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
                max = defaultTimestamp
            }
            else {
                defaultTimestamp = now
                min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
                max = defaultTimestamp
            }

        }


        setShowTimePicker(true)
        // showPicker()
    }

    function tapEndSleep(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
            return
        }
        if (status != 'ONGOING2' && status != 'ONGOING') {

            Taro.showToast({
                title: t('feature.track_time_duration.console.lock_sleep_tip'),
                icon: 'none'
            })

            vibrate()
            return;
        }
        operateType = 'endSleep'
        global.pauseIndexTimer = true
        global.set_time = new Date().getTime()

        var real_start_time = props.record.current_record.sleep.real_start_time
        var last_check_time = props.record.current_record.last_real_check_time
        var now = new Date().getTime()
        if (now - real_start_time >= dayMilliSeconds) {
            //严重超时
            isTimeout = true
            // defaultTimestamp = Math.min(props.record.current_record.sleep.target_end_time, now)
            // min = Math.max(last_check_time, defaultTimestamp - 3 * dayMillionSeconds)
            // max = Math.min(now, defaultTimestamp + 3 * dayMillionSeconds)
            defaultTimestamp = now
            min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
            max = defaultTimestamp
        }
        else {
            isTimeout = false
            defaultTimestamp = now
            min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
            max = defaultTimestamp
        }

        setShowTimePicker(true)

        // if (last_check_time + 24 * 3600 * 1000 <= new Date().getTime()) {
        //     setShowTimePicker(true)
        //     return
        // }

        // showPicker()
    }

    function tapEndFast(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
            return
        }
        if (status == 'WAIT_FOR_START') {
            Taro.showToast({
                title: t('feature.track_time_duration.console.lock_fast_tip'),
                icon: 'none'
            })
            vibrate()
            return;
        }

        if (status == 'ONGOING1'){
            showAlert({
                title:t('feature.heads_up.alert_title'),
                content:t('feature.heads_up.ongoing1_content'),
                cancelText:t('feature.heads_up.ongoing1_cancel'),
                confirmText:t('feature.heads_up.ongoing1_confirm'),
                showCancel:true,
                cancel:()=>{
                    
                },
                confirm:()=>{
                    tapEndFastOperate()
                }
            })
            return
        }
        else if (status == 'ONGOING2'){
            showAlert({
                title:t('feature.heads_up.alert_title'),
                content:t('feature.heads_up.ongoing2_content'),
                cancelText:t('feature.heads_up.ongoing2_cancel'),
                confirmText:t('feature.heads_up.ongoing2_confirm'),
                showCancel:true,
                cancel:()=>{
                    
                },
                confirm:()=>{
                    tapEndFastOperate()
                }
            })
            return
        }
        
        tapEndFastOperate()
    }

    function tapEndFastOperate(){
        operateType = 'endFast'
        global.pauseIndexTimer = true
        global.set_time = new Date().getTime()

        var real_start_time = props.record.current_record.fast.real_start_time
        var last_check_time = props.record.current_record.last_real_check_time
        var now = new Date().getTime()
        if (now - real_start_time >= dayMilliSeconds) {
            //严重超时
            isTimeout = true
            // defaultTimestamp = Math.min(props.record.current_record.fast.target_end_time, now)
            // min = Math.max(last_check_time, defaultTimestamp - 3 * dayMillionSeconds)
            // max = Math.min(now, defaultTimestamp + 3 * dayMillionSeconds)
            // debugger
            defaultTimestamp = now
            min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
            max = defaultTimestamp
        }
        else {
            isTimeout = false
            defaultTimestamp = now
            min = Math.max(last_check_time, defaultTimestamp - 6 * dayMilliSeconds)
            max = defaultTimestamp
        }

        setShowTimePicker(true)
    }

    function layoutContent() {
        var limit = global.set_time - 7 * 3600 * 1000 * 24;
        global.limit = limit

        if (currentRecord.last_real_check_time) {
            limit = currentRecord.last_real_check_time
            global.limit = limit
            //当set_time秒数<=latest_record_time秒数时,最小限制时间戳需+1分钟
            if (new Date(global.set_time).getSeconds() <= new Date(currentRecord.last_real_check_time).getSeconds() && global.set_time - currentRecord.last_real_check_time > 60000) {
                limit = limit + 60 * 1000
            }
        }

        var title = getTimePickerTitle(currentRecord, t, operateType == 'endFast')
        var color = getColor(currentRecord, operateType == 'endFast')
        var duration = 0
        if (operateType == 'startFast' && currentRecord.fast) {
            duration = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
        }
        if (operateType == 'startSleep' && currentRecord.sleep) {
            duration = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
        }

        var endTimestamp = 0
        if (operateType == 'endFast') {
            endTimestamp = currentRecord.fast.target_end_time
        }
        else if (operateType == 'endSleep') {
            endTimestamp = currentRecord.sleep.target_end_time
        }
        return <View className="modal_content">
            <LimitPickers ref={limitPickerRef} limit={limit} limitDay={7}
                themeColor={color}
                title={title}
                showEndTime={true}
                isFast={operateType == 'startFast' || operateType == 'endFast'}
                isEnd={operateType == 'endFast' || operateType == 'endSleep'}
                endTimestamp={endTimestamp}
                // showEndTime={operateType == 'startFast' || operateType == 'startSleep'}
                duration={duration}
                onCancel={hidePicker} onChange={(e) => {
                    pickerConfirm(e)
                    global.pauseIndexTimer = false
                    // hidePicker()
                }} />
        </View>
    }

    function timePickerContent() {
        var title = getTimePickerTitle(currentRecord, t, operateType == 'endFast')
        var color = getColor(currentRecord, operateType == 'endFast')
        // var limit = props.record.current_record.last_real_check_time
        // var targetTime = props.record.current_record.fast.target_end_time
        // if (props.record.current_record.status == 'ONGOING3') {
        //     limit = 0
        //     targetTime = props.record.current_record.sleep.real_end_time + 60 * 1000
        // }
        var endTimestamp = 0
        if (operateType == 'endFast') {
            endTimestamp = currentRecord.fast.target_end_time
        }
        else if (operateType == 'endSleep') {
            endTimestamp = currentRecord.sleep.target_end_time
        }

        var duration = 0
        if (operateType == 'startFast' && currentRecord.fast) {
            duration = currentRecord.fast.target_end_time - currentRecord.fast.target_start_time
        }
        if (operateType == 'startSleep' && currentRecord.sleep) {
            duration = currentRecord.sleep.target_end_time - currentRecord.sleep.target_start_time
        }

        return <View className="modal_content">
            <ConsolePicker ref={limitPickerRef}
                themeColor={color}
                title={title}
                onCancel={hidePicker}
                min={min}
                max={max}
                current={defaultTimestamp}
                duration={duration}
                endTimestamp={endTimestamp}
                isFast={operateType == 'startFast' || operateType == 'endFast'}
                isEnd={operateType == 'endFast' || operateType == 'endSleep'}
                isTimeout={isTimeout}
                isLoading={btnDisable}
                onChange={(e) => {
                    pickerConfirm(e)
                    global.pauseIndexTimer = false
                }}
            />
            {/* <LimitTimeoutPickers ref={limitPickerRef} limit={limit} limitDay={7}
                themeColor={color}
                title={title}
                isFast={operateType == 'endFast'}
                endTimestamp={endTimestamp}
                time={operateType == 'endFast' ? new Date(targetTime).getTime() :
                    new Date(props.record.current_record.sleep.target_end_time).getTime()
                }
                onCancel={hidePicker} onChange={(e) => {
                    pickerConfirm(e)
                    global.pauseIndexTimer = false
                }} /> */}

        </View>
    }

    function showPicker() {
        // global.scenario = 'FAST_SLEEP'
        if (global.testInfotimer) {
            return
        }
        global.pauseIndexTimer = true
        global.set_time = new Date().getTime()
        updateNodeInfo()
        if (!global.isDebug) {
            return
        }
        // global.testInfotimer = setInterval(() => {
        // updateNodeInfo()

        // }, 1000)

    }

    function updateNodeInfo() {
        var node = layoutContent()
        global.showIndexModal(true, node, null);
    }

    function hidePicker() {
        var node = layoutContent()
        global.showIndexModal(false, node, null);
        setShowTimePicker(false)
        setBtnDisable(false)
        global.pauseIndexTimer = false
    }


    function followWxPub() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'follow_wx_pub'
        })

        jumpPage('/pages/common/H5?title=fast16cc 关注服务号&url=' + resource[0].url)
    }

    function pickerConfirm(t1: number) {
        if (btnDisable) {
            return
        }
        setBtnDisable(true)
        // hidePicker()
        var date = new Date(t1)
        var setDate = new Date(global.set_time);
        date.setMilliseconds(setDate.getMilliseconds());
        date.setSeconds(setDate.getSeconds());

        t1 = date.getTime();

        // if (process.env.TARO_ENV=='rn'){
        //     debugger
        //     JPush.isNotificationEnabled((res)=>{
        //         console.log(res)
        //         debugger
        //     })
        // }


        switch (operateType) {
            case 'startFast':
                startFast(t1, fastDuration).then(res => {
                    global.indexPageRefresh()
                    setFirstEnter(false)
                    hidePicker()
                    setBtnDisable(false)
                    refreshDayNight()

                    if (process.env.TARO_ENV == 'weapp') {
                        debugger
                        if (permission.wxPubFollow) {
                            // showAlert({
                            //     title: t('feature.track_time_duration.reminders.fast_end_title'),
                            //     content:
                            //         t('feature.track_time_duration.reminders.enable_post_fast_content',
                            //             { date: TimeFormatter.dateDescription(t1 + fastDuration, true), time: TimeFormatter.timeDescription(t1 + fastDuration) }
                            //         ),
                            //     showCancel: false,
                            //     confirmText: t('feature.track_time_duration.reminders.ok')
                            // })
                        }
                        else {
                            showAlert({
                                title: t('feature.track_time_duration.reminders.fast_end_title'),
                                content: t('feature.track_time_duration.reminders.post_fast_content',
                                    { date: TimeFormatter.dateDescription(t1 + fastDuration, true), time: TimeFormatter.timeDescription(t1 + fastDuration) }
                                ),
                                showCancel: true,
                                cancelText: t('feature.track_time_duration.reminders.later'),
                                confirmText: t('feature.track_time_duration.reminders.open'),
                                confirm: () => { followWxPub() }
                            })
                        }
                    }
                    else {
                        PushNotification.checkPermissions((res)=>{
                            //允许授权
                            if ((kIsIOS && res.authorizationStatus == 2) || (!kIsIOS && res.alert)){
                                getLocalPush()
                                // showAlert({
                                //     title: t('feature.track_time_duration.reminders.fast_end_title'),
                                //     content:
                                //         t('feature.track_time_duration.reminders.enable_post_fast_content',
                                //             { date: TimeFormatter.dateDescription(t1 + fastDuration, true), time: TimeFormatter.timeDescription(t1 + fastDuration) }
                                //         ),
                                //     showCancel: false,
                                //     confirmText: t('feature.track_time_duration.reminders.ok')
                                // })
                            }
                            else {
                                showAlert({
                                    title: t('feature.track_time_duration.reminders.fast_end_title'),
                                    content: t('feature.track_time_duration.reminders.post_fast_content',
                                        { date: TimeFormatter.dateDescription(t1 + fastDuration, true), time: TimeFormatter.timeDescription(t1 + fastDuration) }
                                    ),
                                    showCancel: true,
                                    cancelText: t('feature.track_time_duration.reminders.later'),
                                    confirmText: t('feature.track_time_duration.reminders.open'),
                                    confirm: () => {
                                        // Linking.openURL('app-settings:notifications')
                                        checkNotification()
                                    }
                                })
                            }
                        })


                    }


                }).catch(e => {
                    setBtnDisable(false)
                })
                break
            case 'startSleep':
                startSleep(t1, sleepDuration).then(res => {
                    global.indexPageRefresh()
                    setFirstEnter(false)
                    hidePicker()
                    setBtnDisable(false)
                    refreshDayNight()
                    if (process.env.TARO_ENV == 'weapp') {
                        if (permission.wxPubFollow) {
                            // showAlert({
                            //     title: t('feature.track_time_duration.reminders.wake_title'),
                            //     content:
                            //         t('feature.track_time_duration.reminders.enable_post_sleep_content',
                            //             { date: TimeFormatter.dateDescription(t1 + sleepDuration, true), time: TimeFormatter.timeDescription(t1 + sleepDuration) }),
                            //     showCancel: false,
                            //     confirmText: t('feature.track_time_duration.reminders.ok')
                            // })
                        }
                        else {

                            showAlert({
                                title: t('feature.track_time_duration.reminders.wake_title'),
                                content: t('feature.track_time_duration.reminders.post_sleep_content',
                                    { date: TimeFormatter.dateDescription(t1 + sleepDuration, true), time: TimeFormatter.timeDescription(t1 + sleepDuration) }),
                                cancelText: t('feature.track_time_duration.reminders.later'),
                                confirmText: t('feature.track_time_duration.reminders.open'),
                                showCancel: true,
                                confirm: () => { followWxPub() }

                            })
                        }
                    }
                    else {
                        PushNotification.checkPermissions((res)=>{
                            //允许授权
                            if ((kIsIOS && res.authorizationStatus == 2) || (!kIsIOS && res.alert)){
                                getLocalPush()
                                // showAlert({
                                //     title: t('feature.track_time_duration.reminders.wake_title'),
                                //     content:
                                //         t('feature.track_time_duration.reminders.enable_post_sleep_content',
                                //             { date: TimeFormatter.dateDescription(t1 + sleepDuration, true), time: TimeFormatter.timeDescription(t1 + sleepDuration) }),
                                //     showCancel: false,
                                //     confirmText: t('feature.track_time_duration.reminders.ok')
                                // })
                            }
                            else {
                                showAlert({
                                    title: t('feature.track_time_duration.reminders.wake_title'),
                                    content: t('feature.track_time_duration.reminders.post_sleep_content',
                                        { date: TimeFormatter.dateDescription(t1 + sleepDuration, true), time: TimeFormatter.timeDescription(t1 + sleepDuration) }),
                                    cancelText: t('feature.track_time_duration.reminders.later'),
                                    confirmText: t('feature.track_time_duration.reminders.open'),
                                    showCancel: true,
                                    confirm: () => {
                                        checkNotification()
                                        // Linking.openURL('app-settings:notifications')
                                    }
                                })
                            }
                        })






                    }

                }).catch((e) => {
                    setBtnDisable(false)
                    var picker = limitPickerRef.current;
                    (picker as any).resetPickerData()
                })
                break
            case 'endSleep':
                endSleep(t1).then(res => {
                    getLocalPush()
                    setBtnDisable(false)
                    global.indexPageRefresh()
                    setFirstEnter(false)
                    hidePicker()
                    global.refrehWeekly()
                    global.refreshStreaks()
                    refreshDayNight()
                    if (props.record.current_record.scenario == 'SLEEP') {
                        global.scrollToLatest()

                    }
                }).catch((e) => {
                    
                    setBtnDisable(false)
                    var picker = limitPickerRef.current;
                    (picker as any).resetPickerData()


                })
                break
            case 'endFast':
                endFast(t1).then(res => {
                    getLocalPush()
                    setBtnDisable(false)
                    global.indexPageRefresh()
                    setFirstEnter(false)
                    hidePicker()
                    global.scrollToLatest()
                    global.refrehWeekly()
                    global.refreshStreaks()
                    refreshDayNight()
                    var obj = global.checkAccess
                    if (global.checkAccess) {
                        console.log('applw')
                    }
                    else {
                        console.log('apple')
                    }
                    global.checkAccess((res as any).access)
                    // checkAccessProvisional((res as any).access,showFastAlert)
                }).catch((e) => {
                    
                    setBtnDisable(false)
                    var picker = limitPickerRef.current;
                    (picker as any).resetPickerData()


                })
                break
        }
    }

    function refreshDayNight() {
        if (global.refreshNight) {
            global.refreshNight()
        }
        if (global.refreshDay) {
            global.refreshDay()
        }
    }

    function expandBtnText() {
        if (status == 'WAIT_FOR_START') {
            return t('feature.track_time_duration.console.next_steps')
        }
        else if (firstEnter) {
            return t('feature.track_time_duration.console.show_more')
        }
        return t('feature.track_time_duration.console.next_steps')
    }

    function modalContent() {
        global.set_time = new Date().getTime()
        return <Modal
            testInfo={null}
            dismiss={() => {
                hidePicker()
                // setShowTimeoutPicker(false)
            }}
            confirm={() => { }}>
            {
                timePickerContent()
            }
        </Modal>
    }

    function single() {
        if (props.record.scenario.name == 'FAST') {
            return <View style={{ marginTop: rpxToPx(0) }}>
                {
                    status == 'WAIT_FOR_START' &&
                    <View onClick={tapStartFast} className='console_btn'>
                        <Text style={{ fontWeight: 'bold',color:ColorType.black }}>{t('feature.track_time_duration.common.start_fast')}</Text>
                    </View>
                }
                {/* {
                    status != 'WAIT_FOR_START' && <View className='btn_line' />
                } */}
                {
                    status == 'ONGOING' && <View onClick={tapEndFast} className={status == 'ONGOING' ? 'console_btn' : 'console_btn btn_disable'}>
                        <Text style={{ fontWeight: 'bold',color:ColorType.black }}>{t('feature.track_time_duration.common.end_fast')}</Text>
                    </View>
                }
                {
                    showTimePicker && modalContent()
                }
            </View>
        }
        else if (props.record.scenario.name == 'SLEEP') {
            return <View style={{ marginTop: rpxToPx(0) }}>
                {
                    status == 'WAIT_FOR_START' &&
                    <View onClick={tapStartSleep} className='console_btn btn_sleep'>
                        <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.start_sleep')}</Text>
                    </View>
                }
                {/* {
                    status != 'WAIT_FOR_START' && <View className='btn_line' />
                } */}
                {
                    status == 'ONGOING' && <View onClick={tapEndSleep} className={status == 'ONGOING' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
                        <Text style={{ fontWeight: 'bold' }}>{t('feature.track_time_duration.common.end_sleep')}</Text>
                    </View>
                }

                {
                    showTimePicker && modalContent()
                }

            </View>
        }
    }

    function mixed() {
        return <View style={{ marginTop: rpxToPx(0) }}>

            {
                status == 'WAIT_FOR_START' ?
                    <View onClick={tapStartFast} className='console_btn'>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32),color:ColorType.black }}>{t('feature.track_time_duration.common.start_fast')}</Text>
                    </View> :
                    <View onClick={() => { tapStage(0) }} className='stage_btn'>
                        <Text style={{ flex: 1, color: '#fff' }}>{t('feature.track_time_duration.stage.a')}</Text>
                        {
                            status == 'ONGOING1' ?
                                <Text style={{ color: '#fff' }}>{TimeFormatter.countdown(currentRecord.fast.real_start_time)}</Text> :
                                <Text style={{ color: '#fff' }}>{TimeFormatter.calculateTimeDifference(currentRecord.fast.real_start_time, currentRecord.sleep.real_start_time)}</Text>
                        }

                    </View>
            }
            <View className='btn_line' />
            {
                (status == 'WAIT_FOR_START' || status == 'ONGOING1') &&
                <View onClick={tapStartSleep} className={status == 'ONGOING1' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
                    {
                        status != 'ONGOING1' && <Image className='lock' src={require('@assets/images/lock.png')} />
                    }
                    <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32),color:ColorType.black }}>{t('feature.track_time_duration.common.start_sleep')}</Text>
                </View>
            }
            {
                (status != 'WAIT_FOR_START' && status != 'ONGOING1') &&
                <View onClick={() => { tapStage(1) }} className='stage_btn'>
                    <Text style={{ flex: 1, color: '#fff' }}>{t('feature.track_time_duration.stage.b')}</Text>
                    {
                        status == 'ONGOING2' ? <Text style={{ color: '#fff' }}>{TimeFormatter.countdown(currentRecord.sleep.real_start_time)}</Text> :
                            <Text style={{ color: '#fff' }}>{TimeFormatter.calculateTimeDifference(currentRecord.sleep.real_start_time, currentRecord.sleep.real_end_time)}</Text>
                    }


                </View>
            }
            {(expand || (status != 'WAIT_FOR_START' && status != 'ONGOING1')) && <View className='btn_line' />}
            {
                (expand || (status != 'WAIT_FOR_START' && status != 'ONGOING1')) && (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2') &&
                <View onClick={tapEndSleep} className={status == 'ONGOING2' ? 'console_btn btn_sleep' : 'console_btn btn_sleep btn_disable'}>
                    {
                        status != 'ONGOING2' && <Image className='lock' src={require('@assets/images/lock.png')} />
                    }
                    <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32),color:ColorType.black }}>{t('feature.track_time_duration.common.end_sleep')}</Text>
                </View>
            }
            {
                status == 'ONGOING3' &&
                <View onClick={() => { tapStage(2) }} className='stage_btn'>
                    <Text style={{ flex: 1, color: '#fff' }}>{t('feature.track_time_duration.stage.c')}</Text>
                    <Text style={{ color: '#fff' }}>{TimeFormatter.countdown(currentRecord.sleep.real_end_time)}</Text>
                </View>
            }
            {(expand || status == 'ONGOING3' || status == 'ONGOING') && <View className='btn_line' />}
            {
                (expand || status == 'ONGOING3' || status == 'ONGOING') &&
                <View onClick={tapEndFast} className={status == 'ONGOING3' ? 'console_btn' : 'console_btn btn_disable'}>
                    {
                        status == 'WAIT_FOR_START' && <Image className='lock' src={require('@assets/images/lock.png')} />
                    }
                    <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(32),color:ColorType.black  }}>{t('feature.track_time_duration.common.end_fast')}</Text>
                </View>
            }
            {
                (status == 'WAIT_FOR_START' || status == 'ONGOING1' || status == 'ONGOING2') &&
                <View>
                    {
                        !expand && <Text className='expand' onClick={() => { setExpand(true) }}>{expandBtnText()}</Text>
                    }
                </View>
            }
            {
                showTimePicker && modalContent()
            }
            {
                showStageModal && stageContent()
            }


        </View>
    }

    function stageContent() {
        return <Modal
            testInfo={null}
            dismiss={() => {
                global.pauseIndexTimer = false
                setShowStageModal(false)
            }}
            confirm={() => { }}>
            {
                <CircadianDetailPopup
                    record={currentRecord}
                    schedule={props.record.scenario.schedule}
                    stageIndex={stageIndex}
                    onlyStage={true}
                    onClose={() => { setShowStageModal(false); }} />
            }
        </Modal>

    }

    function tapStage(index) {
        stageIndex = index
        setShowStageModal(true)
    }

    return <View>
        {
            props.record.scenario.name == 'FAST_SLEEP' ? mixed() : single()
        }
        <CheckAccess record={props.record} count={props.count} />
    </View>

}