taro/src/features/trackTimeDuration/components/SetSchedule.rn.tsx

import Buttons from "@/components/basic/Buttons";
import { setPlan } from "@/services/trackTimeDuration";
import { setScenario, setStep } from "@/store/scenario";
import { View, Text, PageContainer, Image } from "@tarojs/components";
import "./SetSchedule.scss";
import Taro, { useDidShow, useReady } from "@tarojs/taro";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Footer from "@/components/layout/Footer";
import PickerViews from "@/components/input/PickerViews";
import { durationDatas, durationIndex, durationTime, pickerDurations } from "../hooks/Console";
import { TimeFormatter } from "@/utils/time_format";
import Modal from "@/components/layout/Modal";
import TimePicker from "@/features/common/TimePicker";
import { SetScheduleBtn } from "@/features/common/SpecBtns";
import Layout from "@/components/layout/layout";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";
import TitleView from "./TitleView";
import { jumpPage } from "../hooks/Common";
import { rpxToPx, vibrate } from "@/utils/tools";
import { PixelRatio } from "react-native";

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}
export default function Component() {
    const isFastFirst = true;
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const canvasRef = useRef(null);
    const [scenario] = useState(useSelector((state: any) => state.scenario))
    // const scenario = useSelector((state: any) => state.scenario);
    const common = useSelector((state: any) => state.common);

    const [isOpen, setIsOpen] = useState(false)
    const [isTimeOpen, setIsTimeOpen] = useState(false)
    const [btnDisable, setBtnDisable] = useState(false)

    const pickerRef = useRef<any>(null);
    // const [count,setCount] = useState(0)
    const [beginChange, setBeginChange] = useState(true)
    const [operateType, setOperateType] = useState(0)
    const [isModalTimePicker, setIsModalTimePicker] = useState(false)

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



    var scheduleObj: { start_time: any; end_time: any; };
    if (scenario.name == 'FAST') {
        scheduleObj = scenario.schedule.fast
    }
    else if (scenario.name == 'SLEEP') {
        scheduleObj = scenario.schedule.sleep
    }
    else {
        if (scenario.step == 'fast') {
            scheduleObj = scenario.schedule.fast
        }
        else {
            scheduleObj = scenario.schedule.sleep
        }
    }



    const [startTime, setStartTime] = useState(scheduleObj.start_time)
    const [endTime, setEndTime] = useState(scheduleObj.end_time)

    global.startTime = startTime
    global.endTime = endTime
    const [pickerValue, setPickerValue] = useState(durationIndex(scheduleObj.start_time, scheduleObj.end_time, common))

    const [hours, setHours] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[0])
    const [minutes, setMinutes] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[1])
    const [chooseStart, setChooseStart] = useState(true)
    const [count, setCount] = useState(0)


    useEffect(() => {
        if (global.schedule_fast && scenario.step == 'fast') {
            scheduleObj = global.schedule_fast
        }
        if (global.schedule_sleep && scenario.step == 'sleep') {
            scheduleObj = global.schedule_sleep
        }
        setStartTime(scheduleObj.start_time)
        setEndTime(scheduleObj.end_time)
        setPickerValue(durationIndex(scheduleObj.start_time, scheduleObj.end_time, common))
        setHours(durationTime(scheduleObj.start_time, scheduleObj.end_time)[0])
        setMinutes(durationTime(scheduleObj.start_time, scheduleObj.end_time)[1])
    }, [])

    useEffect(() => {
        if (isOpen || isTimeOpen) {
            global.disableCanvasGesture = true
        }
        else {
            global.disableCanvasGesture = false
        }
    }, [isOpen, isTimeOpen])


    useDidShow(() => {
        setCount(count + 1)
    })


    function start() {
        if (scenario.name == 'FAST' || scenario.name == 'SLEEP') {
            setBtnDisable(true)
            setPlan({
                scenario: scenario.name,
                schedule: scenario.name == 'FAST' ? {
                    fast: {
                        start_time: startTime,
                        end_time: endTime,
                    }
                } : {
                    sleep: {
                        start_time: startTime,
                        end_time: endTime,
                    }
                }
            }).then(res => {
                setBtnDisable(false)
                global.checkData()
                global.indexPageRefresh()
                if (process.env.TARO_ENV == 'weapp') {
                    Taro.navigateBack({ delta: 3 })
                }
                else {
                    navigation.popToTop()
                }
            }).catch(e => {
                setBtnDisable(false)
            })
        }
        else {
            if ((scenario.step == 'fast' && isFastFirst) || (scenario.step == 'sleep' && !isFastFirst)) {
                var obj = JSON.parse(JSON.stringify(scenario))
                if (isFastFirst) {
                    obj.schedule.fast = {
                        start_time: startTime,
                        end_time: endTime,
                    }
                    dispatch(setStep('sleep'))
                    dispatch(setScenario(obj))
                }
                else {
                    obj.schedule.sleep = {
                        start_time: startTime,
                        end_time: endTime,
                    }
                    dispatch(setStep('fast'))
                    dispatch(setScenario(obj))
                }

                saveTempCache(startTime, endTime)

                jumpPage('/pages/clock/SetSchedule', 'SetSchedule', navigation)
            }
            else {
                commit()
            }
        }
    }

    function saveTempCache(strStart, strEnd) {
        if (scenario.step == 'fast') {
            global.schedule_fast = {
                start_time: strStart,
                end_time: strEnd,
            }
        }
        if (scenario.step == 'sleep') {
            global.schedule_sleep = {
                start_time: strStart,
                end_time: strEnd,
            }
        }

    }

    function commit() {
        setBtnDisable(true)
        setPlan({
            scenario: scenario.name,
            schedule: {
                fast: {
                    start_time: isFastFirst ? scenario.schedule.fast.start_time : startTime,
                    end_time: isFastFirst ? scenario.schedule.fast.end_time : endTime,
                }, sleep: {
                    start_time: !isFastFirst ? scenario.schedule.sleep.start_time : startTime,
                    end_time: !isFastFirst ? scenario.schedule.sleep.end_time : endTime,
                }
            }
        }).then(res => {
            setBtnDisable(false)
            dispatch(setStep('fast'))
            global.checkData()

            if (process.env.TARO_ENV == 'weapp') {
                Taro.navigateBack({ delta: 4 })
            }
            else {
                navigation.popToTop()
            }

        }).catch(e => {
            setBtnDisable(false)
        })
    }

    function onStartTimeChange(e: string) {
        setIsTimeOpen(false)
        setBeginChange(true)
        setStartTime(e)

        setPickerValue(durationIndex(e, endTime, common))
        setHours(durationTime(e, endTime)[0])
        setMinutes(durationTime(e, endTime)[1])
        saveTempCache(e, endTime);
        if (global.updateDial)
            global.updateDial(e, endTime)
    }

    function onEndTimeChange(e: string) {
        setIsTimeOpen(false)
        setBeginChange(false)
        setEndTime(e)
        setPickerValue(durationIndex(startTime, e, common))
        setHours(durationTime(startTime, e)[0])
        setMinutes(durationTime(startTime, e)[1])
        saveTempCache(startTime, e);
        if (global.updateDial)
            global.updateDial(startTime, e)
    }



    function showPicker() {
        setIsOpen(true)
    }

    function durationChange(e) {
        var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step

        var h = parseInt(count / 60)
        var m = count % 60
        setHours(h)
        setMinutes(m)
        setPickerValue(e)
        setIsOpen(false)
        if (beginChange) {
            var strEnd = TimeFormatter.calculateTimeByTimeRange(count, startTime, true)

            setEndTime(strEnd);
            saveTempCache(startTime, strEnd)
            if (global.updateDial)
                global.updateDial(startTime, strEnd)
        }
        else {
            var strStart = TimeFormatter.calculateTimeByTimeRange(count, endTime, false)

            setStartTime(strStart);
            saveTempCache(strStart, endTime)
            if (global.updateDial)
                global.updateDial(strStart, endTime)
        }

    }

    global.startDuration = (type) => {
        setOperateType(type)
    }

    global.updateDuration = (start, end) => {
        var startCount = parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])
        var endCount = parseInt(end.split(':')[0]) * 60 + parseInt(end.split(':')[1])
        if (operateType == 1 && startCount % 30 == 0) {
            vibrate()
        }
        else if (operateType == 2 && endCount % 30 == 0) {
            vibrate()
        }
        else if (operateType == 3 && (startCount % 30 == 0 || endCount % 30 == 0)) {
            vibrate()
        }

        setStartTime(start)
        setEndTime(end)
        setPickerValue(durationIndex(start, end, common))
        setHours(durationTime(start, end)[0])
        setMinutes(durationTime(start, end)[1])
        saveTempCache(start, end)
    }


    global.endDuration = () => {
        setOperateType(0)
    }

    function layoutContent() {
        return <PickerViews ref={pickerRef}
            onChange={durationChange}
            items={durationDatas(common)}
            value={pickerValue} height={200}
            title={scenario.step == 'fast' ?
                t('feature.track_time_duration.dial.picker_fast_schedule_duration') :
                t('feature.track_time_duration.dial.picker_sleep_schedule_duration')}
            themeColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
            showBtns={true} onCancel={() => { setIsOpen(false); }} />
    }

    function pickerTitle() {
        if (scenario.step == 'fast') {
            if (chooseStart) {
                return t('feature.track_time_duration.dial.picker_fast_schedule_start_time');
            }
            return t('feature.track_time_duration.dial.picker_fast_schedule_end_time');
        }
        else {
            if (chooseStart) {
                return t('feature.track_time_duration.dial.picker_sleep_schedule_start_time');
            }
            return t('feature.track_time_duration.dial.picker_sleep_schedule_end_time');
        }
    }


    function timeContent() {
        return <TimePicker time={chooseStart ? startTime : endTime}
            color={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
            title={pickerTitle()}
            confirm={chooseStart ? onStartTimeChange : onEndTimeChange}
            cancel={() => { setIsTimeOpen(false) }} />
    }

    function getTargetDesc() {
        var count = 24*60-(hours * 60 + minutes)
        var leftHours = Math.floor(count/60)
        var leftMinutes = count%60
        return scenario.step == 'fast' ? t('page.set_schedule.fast_target_desc', {
            target_time: (hours > 0 ? hours + TimeFormatter.getHoursUnit(hours) : '') + (minutes > 0 ? minutes + TimeFormatter.getMinutesUnit(minutes) : ''), 
            left_time: (leftHours > 0 ? leftHours + TimeFormatter.getHoursUnit(leftHours) : '') + (leftMinutes > 0 ? leftMinutes + TimeFormatter.getMinutesUnit(leftMinutes) : '')
        }) :
            t('page.set_schedule.sleep_target_desc', {
                target_time: (hours > 0 ? hours + TimeFormatter.getHoursUnit(hours) : '') + (minutes > 0 ? minutes + TimeFormatter.getMinutesUnit(minutes) : ''), 
                left_time: (leftHours > 0 ? leftHours + TimeFormatter.getHoursUnit(leftHours) : '') + (leftMinutes > 0 ? leftMinutes + TimeFormatter.getMinutesUnit(leftMinutes) : '')
            })
    }

    function detail() {
        var isNextDay: boolean = parseInt(startTime.split(':')[0]) * 60 + parseInt(startTime.split(':')[1]) > parseInt(endTime.split(':')[0]) * 60 + parseInt(endTime.split(':')[1])


        return <View style={{ height: Taro.getSystemInfoSync().screenHeight - 200, flexDirection: 'column', display: 'flex' }}>
            {/* <Text className="subtitle">{t('page.set_schedule.fast_subtitle')}</Text> */}
            <TitleView title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
                subTitle={t('page.set_schedule.fast_subtitle')}
                titleColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
            />

            <View style={{ color: '#fff', marginTop: rpxToPx(64) }}>
                <Text className="cell_header">{scenario.step == 'fast' ? t('page.set_schedule.fast_target') : t('page.set_schedule.sleep_target')}</Text>
                <View className="cell_full" onClick={() => { setIsModalTimePicker(false); setIsOpen(true) }}>
                    <Text className="cell_title">{t('feature.track_time_duration.dial.duration')}</Text>
                    <Text className="cell_value" style={{ color: scenario.step == 'fast' ? ColorType.fast : ColorType.sleep }}>{hours > 0 ? hours + TimeFormatter.getHoursUnit(hours) : ''}{minutes > 0 ? minutes + TimeFormatter.getMinutesUnit(minutes) : ''}</Text>
                    <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
                </View>
                <Text className="cell_footer">{getTargetDesc()}</Text>

                <View style={{ height: rpxToPx(60) }} />
                <Text className="cell_header">{scenario.step == 'fast' ? t('page.set_schedule.fast_schedule') : t('page.set_schedule.sleep_schedule')}</Text>
                <View className="cell_top" onClick={() => {
                    setIsModalTimePicker(true)
                    setChooseStart(true)
                    setIsTimeOpen(true)
                }}>
                    <Text className="cell_title">{t('feature.track_time_duration.dial.start_time')}</Text>
                    <Text className="cell_value" style={{ color: scenario.step == 'fast' ? ColorType.fast : ColorType.sleep }}>{startTime}</Text>
                    <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
                    <View className="cell_line" style={{ height: 1 / PixelRatio.get() }} />
                </View>
                <View className="cell_bottom" onClick={() => {
                    setIsModalTimePicker(true)
                    setChooseStart(false)
                    setIsTimeOpen(true)
                }}>
                    <Text className="cell_title">{t('feature.track_time_duration.dial.end_time')}</Text>
                    {
                        isNextDay &&
                        <Text className="next_day">{t('page.set_schedule.next_day')}</Text>
                    }

                    <Text className="cell_value" style={{ color: scenario.step == 'fast' ? ColorType.fast : ColorType.sleep }}>{endTime}</Text>
                    <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
                </View>
                <Text className="cell_footer">{scenario.step == 'fast' ? t('page.set_schedule.fast_schedule_desc', {
                    start_time: startTime, end_time: endTime, the_next_day:
                        isNextDay ? t('page.set_schedule.the_next_day') : ''
                }) :
                    t('page.set_schedule.sleep_schedule_desc', {
                        start_time: startTime, end_time: endTime, the_next_day:
                            isNextDay ? t('page.set_schedule.the_next_day') : ''
                    })}</Text>
                {/* <Text className="cell_footer">计划每日18:00开始断食，次日10:00结束断食。</Text> */}
            </View>

            <View style={{ flex: 1 }} />

            <Footer>
                <SetScheduleBtn title={(scenario.step == 'fast' && scenario.name == 'FAST_SLEEP') ? t('feature.common.btn_set_and_next') : t('feature.common.btn_set_and_done')}
                    lowLight={operateType != 0}
                    isFast={scenario.step == 'fast'}
                    disable={btnDisable}
                    onClick={() => start()} />
            </Footer>

            {
                (isOpen || isTimeOpen) && <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                    overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                    customStyle={{ backgroundColor: '#1c1c1c' }}
                    closeOnSlideDown={false}
                    onAfterLeave={() => { setIsOpen(false); setIsTimeOpen(false) }}
                    show={isOpen || isTimeOpen} round={true} overlay={true} position='bottom'
                >
                    {
                        isTimeOpen ? timeContent() : layoutContent()
                    }
                </PageContainer>
            }

            {/* <PageContainer style={{ backgroundColor: '#1c1c1c' }}
        overlayStyle='background-color:rgba(0,0,0,0.9)'
        custom-style='background-color:#1c1c1c'
        closeOnSlideDown={false}
        onAfterLeave={() => { setIsOpen(false); setIsTimeOpen(false) }}
        show={isOpen || isTimeOpen} round={true} overlay={true} position='bottom'
      >
        {
          isModalTimePicker?timeContent():layoutContent()
        }
      </PageContainer> */}
            {/* {
                isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => {
                    setIsOpen(false)
                    durationChange(pickerRef.current.getConfirmData())
                }} />
            }
            {
                isTimeOpen && <Modal children={timeContent()} dismiss={() => setIsTimeOpen(false)} confirm={() => {
                    setIsTimeOpen(false)
                }} />
            } */}

        </View>
    }

    return <Layout
        titleColor={scenario.step == 'fast' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
        title={scenario.step == 'fast' ? t('page.set_schedule.fast_title') : t('page.set_schedule.sleep_title')}
        titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.customHeader}>
        {
            detail()
        }
    </Layout>;
}