taro/src/pages/clock/Suggest.tsx

import { ColorType } from "@/context/themes/color";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { View, Text, Picker, ScrollView } from "@tarojs/components";
import { useDidShow, useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import './ChooseScenario.scss';
import PickerViews from "@/components/input/PickerViews";
import { useDispatch, useSelector } from "react-redux";
import { rpxToPx } from "@/utils/tools";
import { updateFast, updateSleep, updateStep } from "@/store/set_target";
import { TimeFormatter } from "@/utils/time_format";
import Footer from "@/components/layout/Footer";
import { IconCheck } from "@/components/basic/Icons";

export default function Suggest() {
    let router: any = null
    var navigation: any = null
    if (process.env.TARO_ENV === 'rn') {
        var useNavigation = require("@react-navigation/native").useNavigation
        navigation = useNavigation()
        const useRoute = require("@react-navigation/native").useRoute
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const common = useSelector((state: any) => state.common);
    const target = useSelector((state: any) => state.target);
    const [pageStep] = useState(target.step);
    const dispatch = useDispatch();

    const [suggestIndex, setSuggestIndex] = useState(-1)
    const [suggestItems, setSuggestItem] = useState<any>([])
    const [scrollTop, setScrollTop] = useState(0)
    const [fastRecommendIndex, setFastRecommendIndex] = useState(-1)
    const [fastLastIndex, setFastLastIndex] = useState(-1)


    useEffect(() => {

        if (pageStep == 1) {
            var obj = target.fast.schedule.fast
            var array: any = []
            var currentIndex = -1;
            var recommendIndex = -1;
            var lastIndex = -1;

            for (var i = 0; i < obj.duration.options.length; i++) {
                if (obj.duration.options[i] == obj.duration.last_value) {
                    lastIndex = i
                }
                else if (obj.duration.options[i] == obj.duration.default_value) {
                    recommendIndex = i
                }
                var fast = JSON.parse(JSON.stringify(target.fast))
                var startCount = fast.schedule.fast.end_time.split(':')[0] * 60 + fast.schedule.fast.end_time.split(':')[1] * 1 - obj.duration.options[i] * 60
                if (startCount < 0) {
                    startCount += 24 * 60
                }
                var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)

                array.push({
                    hours: obj.duration.options[i],
                    left: 24 - obj.duration.options[i],
                    // minutes: obj.duration.minutes[i],
                    // number: obj.duration.numbers[i],
                    time: start
                })
                if (obj.duration.options[i] == obj.duration.init_value) {
                    currentIndex = i
                }
            }

            // var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
            // if (duration <= 0) {
            //     duration += 24 * 60
            // }
            // var durationHours = Math.floor(duration / 60)
            // var durationMinutes = duration % 60
            // var currentIndex = -1;
            // var array: any = []
            // for (var i = 12; i <= 23; i++) {
            //     if (i != 23 || durationMinutes == 0) {
            //         array.push({
            //             hours: i,
            //             minutes: durationMinutes
            //         });
            //     }
            // }

            // for (var i = 0; i < array.length; i++) {
            //     if (array[i].hours == durationHours && array[i].minutes == durationMinutes) {
            //         currentIndex = i
            //         break
            //     }
            // }

            setFastRecommendIndex(recommendIndex)
            setFastLastIndex(lastIndex)
            setSuggestItem(array)
            setSuggestIndex(currentIndex)
            setScrollTop(currentIndex * rpxToPx(160))
        }
        else if (pageStep == 3) {
            var obj = target.sleep.schedule.sleep
            var sleep_cycle = obj.cycle
            var sleep_latency = obj.latency.init_value
            var array: any = []
            var index: number = 0;
            for (var i = 0; i < sleep_cycle.num.options.length; i++) {
                var count = sleep_cycle.num.options[i] * sleep_cycle.duration.init_value + sleep_latency
                //sleep.schedule.sleep.cycle.num.init_value = sleep.schedule.sleep.cycle.num.options[suggestIndex]
                if (sleep_cycle.num.options[i] == sleep_cycle.num.init_value) {
                    index = i
                }

                var sleep = JSON.parse(JSON.stringify(target.sleep))
                var startCount = sleep.schedule.sleep.end_time.split(':')[0] * 60 + sleep.schedule.sleep.end_time.split(':')[1] * 1 - count
                if (startCount < 0) {
                    startCount += 24 * 60
                }
                var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)


                array.push({
                    hours: Math.floor(count / 60),
                    minutes: count % 60,
                    number: sleep_cycle.num.options[i],
                    time: start
                })
            }
            setSuggestItem(array)
            setSuggestIndex(index)

        }
    }, [])

    useDidShow(() => {
        dispatch(updateStep({ step: pageStep }))
    })

    function next() {
        if (pageStep == 1) {
            var item = suggestItems[suggestIndex]
            var fast = JSON.parse(JSON.stringify(target.fast))
            // var startCount = fast.schedule.fast.end_time.split(':')[0] * 60 + fast.schedule.fast.end_time.split(':')[1] * 1 - (item.hours * 60 + item.minutes)
            // if (startCount < 0) {
            //     startCount += 24 * 60
            // }
            // var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)
            fast.schedule.fast.start_time = item.time
            fast.schedule.fast.duration.init_value = fast.schedule.fast.duration.options[suggestIndex]
            dispatch(updateFast({ fast: fast }))
        }
        else if (pageStep == 3) {
            var item = suggestItems[suggestIndex]
            var sleep = JSON.parse(JSON.stringify(target.sleep))
            var startCount = sleep.schedule.sleep.end_time.split(':')[0] * 60 + sleep.schedule.sleep.end_time.split(':')[1] * 1 - (item.hours * 60 + item.minutes)
            if (startCount < 0) {
                startCount += 24 * 60
            }
            var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)
            sleep.schedule.sleep.start_time = start
            sleep.schedule.sleep.cycle.num.init_value = sleep.schedule.sleep.cycle.num.options[suggestIndex]
            dispatch(updateSleep({ sleep: sleep }))
        }
        var step: number = target.step + 1
        dispatch(updateStep({ step: step }))

        var url = '/pages/clock/Suggest'
        var pageName = 'Suggest'
        if (!target.isMixed) {
            if (step == 2) {
                url = '/pages/clock/SetGoal'
                pageName = 'SetGoal'
            }
        }
        else {
            if (step == 4) {
                url = '/pages/clock/SetGoal'
                pageName = 'SetGoal'
            }
        }

        jumpPage(url, pageName, navigation, {})
    }

    function myself() {
        jumpPage(`/pages/clock/SetGoal?isSelf=1`, 'SetGoal', navigation, {
            isSelf: 1
        })
    }

    function suggestTitle() {
        switch (pageStep) {
            case 0:
                return 'Set End Time of Fasting'
            case 1:
                return 'Suggested Fasting Schedule'
            case 2:
                return 'Set Wake Time'
            case 3:
                return 'Suggested Sleep Schedule'
            default:
                return ''
        }
    }

    function suggestDesc() {
        switch (pageStep) {
            case 0:
                return 'What time do you want to break your fast and start your breakfast?'
            case 1:
                return 'To benefit from overnight fasting and enjoy breakfast at ' + target.fast.schedule.fast.end_time + ', start fasting at suggested time.'
            case 2:
                return 'What time do you want to wake up?'
            case 3:
                return 'To wake up refreshed at ' + target.sleep.schedule.sleep.end_time + ', go to bed at suggested time.'
            default:
                return ''
        }
    }

    function durationDatas() {
        var min: number = 0
        var max: number = 23
        var step: number = 5
        var minutes: string[] = []
        for (let i = 0; i < 60; i += step) {
            minutes.push(TimeFormatter.padZero(i))
        }
        var hours: string[] = []
        for (let i = min; i <= max; i++) {
            hours.push(TimeFormatter.padZero(i))
        }
        return [hours, minutes]
    }



    function durationValues() {

        var eatTime = target.fast.schedule.fast.end_time
        if (pageStep == 2) {
            eatTime = target.sleep.schedule.sleep.end_time
        }
        var eatHour = eatTime.split(':')[0]
        var eatMin = eatTime.split(':')[1]
        var list = durationDatas()
        var hourIndex = 0
        var minIndex = 0
        for (let i = 0; i < list[0].length; i++) {
            if (list[0][i] == eatHour) {
                hourIndex = i
                break
            }
        }
        for (let i = 0; i < list[1].length; i++) {
            if (list[1][i] == eatMin) {
                minIndex = i
                break
            }
        }
        return [hourIndex, minIndex]

    }

    function sleepLatency() {
        var obj = target.sleep.schedule.sleep.latency
        var min: number = obj.min
        var max: number = obj.max
        var step: number = obj.step

        var minutes: string[] = []
        for (let i = min; i <= max; i += step) {
            minutes.push(i + '')
        }
        return [minutes]
    }

    function sleepLatencyValue() {
        var obj = target.sleep.schedule.sleep.latency
        var value: number = obj.init_value
        var min: number = obj.min
        var step: number = obj.step
        var index = (value - min) / step

        return [index]
    }

    function timePickerChanged(e: any) {
        var obj = target.fast.schedule.fast
        if (pageStep == 2) {
            obj = target.sleep.schedule.sleep
        }

        var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
        if (duration <= 0) {
            duration += 24 * 60
        }

        var endCount = duration - (e[0] * 60 + e[1] * 5)
        if (endCount < 0) {
            endCount += 24 * 60
        }

        var time = TimeFormatter.padZero(e[0]) + ':' + TimeFormatter.padZero(e[1] * 5)
        var start = TimeFormatter.padZero(Math.floor(endCount / 60)) + ':' + TimeFormatter.padZero(endCount % 60)

        if (pageStep == 0) {
            var fast = JSON.parse(JSON.stringify(target.fast))
            fast.schedule.fast.end_time = time
            fast.schedule.fast.start_time = start
            dispatch(updateFast({ fast: fast }))
        }
        else {
            var sleep = JSON.parse(JSON.stringify(target.sleep))
            sleep.schedule.sleep.end_time = time
            sleep.schedule.sleep.start_time = start
            dispatch(updateSleep({ sleep: sleep }))
        }
    }

    function timePicker() {
        return <View>
            <View style={{ marginBottom: rpxToPx(40), marginLeft: rpxToPx(46), marginRight: rpxToPx(46), borderRadius: rpxToPx(20), overflow: 'hidden' }}>
                <PickerViews ref={null}
                    onChange={timePickerChanged}
                    items={durationDatas()}
                    value={durationValues()} height={200}
                    title=''
                    themeColor={target.isMixed ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
                    showBtns={false}
                    hideTitle={true}
                    onCancel={() => { }} />

            </View>
            {
                pageStep == 1 && <Text className="suggest_footer_note">If you plan to skip breakfast, pick a time for your first meal of the day.</Text>
            }
        </View>
    }

    function fallSleepChanged(e: any) {
        var value = target.sleep.schedule.sleep.latency
        var time = e[0] * value.step + value.min
        var sleep = JSON.parse(JSON.stringify(target.sleep))
        sleep.schedule.sleep.latency.init_value = time
        dispatch(updateSleep({ sleep: sleep }))
    }

    function fallSleepPicker() {
        return <View>
            <View className="target_desc">How long does it take you to fall asleep?</View>
            <View style={{ marginLeft: rpxToPx(46), marginRight: rpxToPx(46), borderRadius: rpxToPx(20), overflow: 'hidden' }}>
                <PickerViews ref={null}
                    onChange={fallSleepChanged}
                    items={sleepLatency()}
                    value={sleepLatencyValue()} height={200}
                    title=''
                    themeColor={target.isMixed ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
                    showBtns={false}
                    hideTitle={true}
                    onCancel={() => { }} />

            </View>
            <Text className="suggest_footer_note">It takes 10 to 30 minutes for most people to fall asleep once they're in bed.</Text>
        </View>
    }

    function suggestList() {
        if (pageStep == 1) {
            return <ScrollView scrollY style={{ height: 400 }} scrollTop={scrollTop}>
                <View style={{ flexDirection: 'column', display: 'flex' }}>
                    {
                        suggestItems.map((item: any, index: number) => {
                            return <View onClick={() => {
                                setSuggestIndex(index)
                            }} key={index} className={index == suggestIndex ? 'item_sel1' : 'item1'}>
                                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                                    <View className="suggest_item_title">{item.hours} hours</View>
                                    <View style={{ flex: 1 }} />
                                    {
                                        index == fastRecommendIndex &&
                                        <View style={{color:'#fff'}}>Recommended</View>
                                    }
                                    {
                                        index == fastLastIndex &&
                                        <View style={{color:'#fff',marginLeft:5}}>Last</View>
                                    }
                                </View>

                                <View className="suggest_item_desc">{item.left} hrs eating</View>
                                {
                                    index == suggestIndex &&
                                    <View className="suggest_choose">
                                        <View style={{ color: ColorType.fast }}>Start fasting at  {item.time}</View>
                                        <IconCheck color={ColorType.fast} width={38} height={26} />
                                    </View>
                                }

                            </View>
                        })
                    }
                </View>
            </ScrollView>
        }
        return <View style={{ flex: 1, overflow: 'scroll' }}>
            {
                suggestItems.map((item: any, index: number) => {
                    return <View onClick={() => {
                        setSuggestIndex(index)
                    }} key={index} className={index == suggestIndex ? 'item_sel2' : 'item1'}>

                        <View className="suggest_item_title">{item.hours} hrs {item.minutes} mins</View>
                        <View className="suggest_item_desc">{item.number} sleep cycles</View>
                        {
                            index == suggestIndex && <View className="suggest_choose">
                                <View style={{ color: ColorType.sleep }}>Go to bed at {item.time}</View>
                                <IconCheck color={ColorType.sleep} width={38} height={26} />
                            </View>
                        }

                    </View>
                })
            }
        </View>
    }

    function content() {
        return <View style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            {
                (pageStep == 0 || pageStep == 2) && timePicker()
            }
            {
                (pageStep == 1 || pageStep == 3) && suggestList()
            }
            {
                pageStep == 2 && fallSleepPicker()
            }
        </View>
    }


    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <Text className="target_title">{suggestTitle()}</Text>
        <Text className="target_desc">{suggestDesc()}</Text>
        {
            content()
        }

        <Footer>
            <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                <ChooseScenarioBtn
                    onClick={next}
                    title={pageStep == 0 || pageStep == 2 ? 'Suggest Plan' : 'Next'}
                    background={pageStep < 2 ? ColorType.fast : ColorType.sleep}
                />
                <Text className="suggest_footer_btn" onClick={myself}>Set Schedule Myself</Text>
            </View>
        </Footer>


    </View>
}