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, useRef, 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";
import Rings2, { BgRing, RingCommon, TargetRing } from '@/features/trackTimeDuration/components/Rings';
import { useTranslation } from "react-i18next";

let ScrollViewRN
if (process.env.TARO_ENV === 'rn') {
    ScrollViewRN = require('react-native').ScrollView
}


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)
    const { t } = useTranslation()
    const scrollViewRef = useRef(null);


    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
                }
                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]
                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] / 60,
                    left: 24 - obj.duration.options[i] / 60,
                    // 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(244) + 50)
            if (process.env.TARO_ENV=='rn'){
                setTimeout(()=>{
                    (scrollViewRef.current as any).scrollTo({x:0,y:currentIndex * rpxToPx(244)+20,animated:true})
                },500)
            }
        }
        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?trigger_event=' + router.params.trigger_event
        var pageName = 'Suggest'
        if (!target.isMixed) {
            if (step == 2) {
                url = '/pages/clock/SetGoal?trigger_event=' + router.params.trigger_event
                pageName = 'SetGoal'
            }
        }
        else {
            if (step == 4) {
                url = '/pages/clock/SetGoal?trigger_event=' + router.params.trigger_event
                pageName = 'SetGoal'
            }
        }

        jumpPage(url, pageName, navigation, {
            trigger_event: router.params.trigger_event
        })
    }

    function myself() {
        jumpPage(`/pages/clock/SetGoal?isSelf=1&trigger_event=` + router.params.trigger_event, 'SetGoal', navigation, {
            isSelf: 1,
            trigger_event: router.params.trigger_event
        })
    }

    function suggestTitle() {
        switch (pageStep) {
            case 0:
                return t('feature.suggest.step_0_title')
            case 1:
                return t('feature.suggest.step_1_title')
            case 2:
                return t('feature.suggest.step_2_title')
            case 3:
                return t('feature.suggest.step_3_title')
            default:
                return ''
        }
    }

    function suggestDesc() {
        switch (pageStep) {
            case 0:
                return t('feature.suggest.end_fast_picker_header')
            case 1:
                return t('feature.suggest.fast_suggest_header', { time: target.fast.schedule.fast.end_time })
            case 2:
                return t('feature.suggest.end_sleep_picker_header')
            case 3:
                return t('feature.suggest.sleep_suggest_header', { time: target.sleep.schedule.sleep.end_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 + ' '+t('feature.suggest.mins'))
        }
        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: 10,
                overflow: 'hidden', backgroundColor: '#1c1c1c', paddingTop: 10, paddingBottom: 10
            }}>
                <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 == 0 && <Text className="suggest_footer_note">{t('feature.suggest.end_fast_picker_footer')}</Text>
            }
            {
                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">{t('feature.suggest.fall_sleep_picker_header')}</View>
            <View style={{
                marginLeft: rpxToPx(46), marginRight: rpxToPx(46),
                borderRadius: 10,
                overflow: 'hidden', backgroundColor: '#1c1c1c', paddingTop: 10, paddingBottom: 10
            }}>
                <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">{t('feature.suggest.fall_sleep_picker_footer')}</Text>
        </View>
    }

    // const common: RingCommon = {
    //     useCase: 'ChooseScenario',
    //     radius: 33,
    //     lineWidth: 8,
    //     isFast: true,
    //     status: 'WAIT_FOR_START'
    // }

    const bgRing: BgRing = {
        color: '#262626'
    }

    // const targetRing: TargetRing = {
    //     color: ColorType.fast,
    //     startArc: timeToArc(ring.schedule.fast.start_time),
    //     durationArc: durationToArc(ring.schedule.fast.start_time, ring.schedule.fast.end_time)
    // }

    function ringCommon() {
        return {
            useCase: 'ChooseScenario',
            radius: 30,
            lineWidth: 12,
            isFast: true,
            status: 'WAIT_FOR_START'
        }
    }

    function targetRing(start, end, isFast, isHighLight) {
        var color: any = isFast ? ColorType.fast + '66' : ColorType.sleep + '66'
        if (!isHighLight) {
            color = isFast ? ColorType.fast + '0D' : ColorType.sleep + '0D'
        }
        return {
            color: color,
            startArc: timeToArc(start),
            durationArc: durationToArc(start, end)
        }
    }

    function point(isFast: boolean, isShow: boolean) {
        if (!isShow) return null;

        var now = new Date()
        var t = suggestItems[suggestIndex].time
        now.setHours(parseInt(t.split(':')[0]))
        now.setMinutes(parseInt(t.split(':')[1]))

        return [{
            color: isFast ? ColorType.fast : ColorType.sleep,
            borderColor: 'transparent',
            timestamp: now.getTime()
        }]
    }

    function timeToArc(time: string) {
        var count: number = parseInt(time.split(':')[1]) + parseInt(time.split(':')[0]) * 60
        // count = count>720?count-720:count
        return (count as any) / 1440 * 2 * Math.PI - Math.PI / 2
    }

    function durationToArc(startTime: string, endTime: string) {
        var start: number = parseInt(startTime.split(':')[1]) + parseInt(startTime.split(':')[0]) * 60
        var end: number = parseInt(endTime.split(':')[1]) + parseInt(endTime.split(':')[0]) * 60
        if (end <= start) {
            end += 1440
        }

        return (end - start) / 1440 * 2 * Math.PI
    }

    function scrollContent() {
        return <View style={{ flexDirection: 'column', display: 'flex' }}>
            {
                suggestItems.map((item: any, index: number) => {
                    return <View key={index} className={suggestIndex == index ? 'item1 item_sel1' : 'item1'} onClick={() => setSuggestIndex(index)}>
                        <View style={{ flexShrink: 0, display: 'flex', width: 74, height: 74, marginRight: rpxToPx(24) }}>
                            <Rings2 common={ringCommon()}
                                bgRing={bgRing}
                                targetRing={targetRing(item.time, target.fast.schedule.fast.end_time, true, suggestIndex == index)}
                                dotList={point(true, index == suggestIndex)}
                                canvasId={new Date().getTime() + index * 5} />
                        </View>
                        <View style={{ flex: 1 }}>

                            <View className="suggest_item_title">{item.hours}{t('feature.suggest.hour')}</View>

                            <View className="suggest_item_desc">{index == suggestIndex ?
                                t('feature.suggest.fast_desc', { start_time: item.hours, end_time: item.left }) :
                                t('feature.suggest.intermittent_fast', { data: `${item.hours}/${item.left}` })
                            }</View>
                            {
                                index == suggestIndex &&
                                <View className="suggest_choose">
                                    <View className="suggest_choose_text" style={{ color: ColorType.fast }}>{t('feature.suggest.start_fast_time', { time: item.time })}</View>

                                </View>
                            }

                        </View>
                        {
                            index == suggestIndex && <View className="choose_item_check_bg">
                                <IconCheck color={ColorType.fast} width={24} height={24} />
                            </View>
                        }
                        <View className='suggest_fast_tag_bg'>
                            {
                                index == fastRecommendIndex &&
                                <View className='suggest_fast_tag'>{t('feature.suggest.popular')}</View>
                            }
                            {
                                index == fastLastIndex &&
                                <View className='suggest_fast_tag'>{t('feature.suggest.recent')}</View>
                            }
                        </View>
                    </View>

                    // return <View onClick={() => {
                    //     setSuggestIndex(index)
                    // }} key={index} className={index == suggestIndex ? 'item_choose_selected' : 'item_choose'}>
                    //     <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' }}>Popular</View>
                    //         }
                    //         {
                    //             index == fastLastIndex &&
                    //             <View style={{ color: '#fff', marginLeft: 5 }}>Recent</View>
                    //         }
                    //     </View>

                    //     <View className="suggest_item_desc">{index == suggestIndex ? `${item.hours} hours fasting / ${item.left} hours eating` : `${item.hours}/${item.left} Intermittent Fasting`}</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>
    }

    function suggestList() {
        if (pageStep == 1 && process.env.TARO_ENV === 'weapp') {
            return <ScrollView scrollY style={{ height: 450 }} scrollTop={scrollTop}>
                {
                    scrollContent()
                }
            </ScrollView>
        }

        if (pageStep == 1 && process.env.TARO_ENV === 'rn') {
            return <ScrollViewRN style={{ height: rpxToPx(868) }} ref={scrollViewRef}>
                {
                    scrollContent()
                }
            </ScrollViewRN>
        }

        return <View style={{ flex: 1, overflow: 'scroll' }}>
            {
                suggestItems.map((item: any, index: number) => {
                    return <View key={index} className={suggestIndex == index ? 'item1 item_sel1' : 'item1'} style={{ borderColor: suggestIndex == index ? ColorType.sleep : '#00000000' }} onClick={() => setSuggestIndex(index)}>
                        <View style={{ flexShrink: 0, display: 'flex', width: 74, height: 74, marginRight: rpxToPx(24) }}>
                            <Rings2 common={ringCommon()}
                                bgRing={bgRing}
                                dotList={point(false, index == suggestIndex)}
                                targetRing={targetRing(item.time, target.sleep.schedule.sleep.end_time, false, suggestIndex == index)}
                                canvasId={new Date().getTime() + index * 5} />
                        </View>
                        <View>

                            <View className="suggest_item_title">{item.hours}{t('feature.suggest.hours2')}{item.minutes>0&&item.minutes+t('feature.suggest.minute')}</View>
                            <View className="suggest_item_desc">{t('feature.suggest.cycles',{times:item.number})}</View>
                            {
                                index == suggestIndex && <View className="suggest_choose">
                                    <View className="suggest_choose_text" style={{ color: ColorType.sleep }}>{t('feature.suggest.go_to_bed_at', { time: item.time })}</View>
                                </View>
                            }

                        </View>
                        {
                            index == 0 && <View className='suggest_tag' style={{ backgroundColor: ColorType.sleep }}>{t('feature.suggest.popular')}</View>
                        }
                        {
                            index == 1 && <View className='suggest_tag' style={{ backgroundColor: ColorType.sleep }}>{t('feature.suggest.restorative')}</View>
                        }
                        {
                            index == suggestIndex && <View className="choose_item_check_bg">
                                <IconCheck color={ColorType.sleep} width={24} height={24} />
                            </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==3 && <Text className="suggest_footer_note">{t('feature.suggest.sleep_suggest_footer')}</Text>
            }
            {
                pageStep == 2 && fallSleepPicker()
            }
            {
                pageStep == 2 && <View style={{ height: 200 }} />
            }
        </View>
    }

    function btnText(){
        // if (pageStep == 3){
        //     return t('feature.suggest.done')
        // }
        // if (pageStep == 1 && !target.isMixed){
        //     return t('feature.suggest.done')
        // }
        return t('feature.suggest.btn')
    }


    return <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
        <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={btnText()}
                    background={pageStep < 2 ? ColorType.fast : ColorType.sleep}
                />
                <Text className="suggest_footer_btn" onClick={myself}>{t('feature.suggest.set_myself')}</Text>
            </View>
        </Footer>
        {
            process.env.TARO_ENV == 'rn' && <View style={{ marginBottom: 40 }} />
        }

    </View>
}