taro/src/pages/clock/Index.tsx

import { View, Text, Image, ScrollView, PageContainer, Swiper, SwiperItem, Switch } from "@tarojs/components";
import Tabbar from "@/components/navigation/TabBar";
import IndexItem from '@/features/trackTimeDuration/components/IndexItem';
import Rings from "@/features/trackTimeDuration/components/Rings";
import './Index.scss'
import { useDispatch, useSelector } from "react-redux";
import { useDidShow, useReady } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getInfoSuccess } from "@/store/user";
import { clockHome, clockSummaryRecords, clockSummaryStats, getClockRecords, getClocks } from "@/services/trackTimeDuration";
import { updateScenario } from "@/store/time";
import { setConfigs } from "@/store/common";
import { setScenario, setStep } from "@/store/scenario";
import { useEffect, useState } from "react";
import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { ColorType } from "@/context/themes/color";
import { bigRingRadius, getBgRing, getCommon, getDot, getSchedule, ringWidth, smallRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
import Modal from '@/components/layout/Modal'
import { rpxToPx } from "@/utils/tools";
import RecordFastSleep from "@/features/trackTimeDuration/components/RecordFastSleep";
import DayLight from "@/features/trackTimeDuration/components/DayLight";
import { getInfo } from "@/services/user";
import { TimeFormatter } from "@/utils/time_format";
import WeekCalendar from "@/features/trackTimeDuration/components/WeekCalendar";
import { useTranslation } from "react-i18next";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import Layout from "@/components/layout/layout";
import { ModalType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import TitleView from "@/features/trackTimeDuration/components/TitleView";
import ClockHeader from "@/features/trackTimeDuration/components/ClockHeader";
import DurationPicker from "@/features/trackTimeDuration/components/DurationPicker";
import SegmentPop from "@/features/trackTimeDuration/components/SegmentPop";
import Box from "@/components/layout/Box";
import DayNightCard from "@/features/trackSomething/components/DayNightCard";
import StageSelector from "@/features/trackTimeDuration/components/StageSelector";

let GradientText
let useNavigation;
let isPause = false;

if (process.env.TARO_ENV == 'rn') {
    GradientText = require('@/components/basic/GradientText').default
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Page() {
    const dispatch = useDispatch();
    global.dispatch = dispatch;
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const time = useSelector((state: any) => state.time);
    const [count, setCount] = useState(0)
    const [homeData, setHomeData] = useState(null)

    const [selIndex, setSelIndex] = useState(0)


    const [showModal, setShowModal] = useState(false)
    const [modalDetail, setModalDetail] = useState<any>(null)

    const [showModal2, setShowModal2] = useState(false)
    const [modalDetail2, setModalDetail2] = useState<any>(null)

    const [debugInfo, setDebugInfo] = useState(null)

    const [isMulti, setIsMulti] = useState(false)
    const [records, setRecords] = useState([])

    const [multiData, setMultiData] = useState([
        {
            title: '睡前断食',
            checked: false
        },
        {
            title: '睡眠中断食',
            checked: false
        },
        {
            title: '起床后断食',
            checked: false
        },
    ])

    useEffect(() => {
        global.showNightRing = false;
        setInterval(() => {
            if (isPause) {
                return
            }
            setCount((prevCounter) => prevCounter + 1)
                
        }, 1000)
    }, [])

    useEffect(() => {
        getCheckData()
    }, [user.isLogin, time.status])

    useReady(async () => {
        const userData = await getStorage('userData');
        debugger
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
            // setTimeout(() => {
            //     // checkWXPubFollow()
            //     getCheckData()

            // }, 200)
            getHistory()


        }

    })

    useDidShow(() => {
        // if (user.isLogin)
        //     refresh()
    })

    global.refreshIndex = () => {

        setCount((prevCounter) => prevCounter + 1)
    }

    function refresh() {
        getInfo().then(res => {
            dispatch(getInfoSuccess(res))
        }).catch(e => {

        })
    }

    function getCheckData() {
        // clockHome().then(res => {
        //     setHomeData(res as any)
        //     global.homeData = res

        //     if (user.isLogin) {
        //         isPause = (res as any).fast_sleep.current_record.status == 'WAIT_FOR_START'
        //         dispatch(updateScenario((res as any).fast_sleep.current_record))
        //         dispatch(setConfigs((res as any).time_input_schema));
        //         dispatch(setScenario((res as any).fast_sleep.scenario));
        //     }
        // })

        // if (!user.isLogin){
        //     return;
        // }

        getClocks().then(res => {
            setHomeData(res as any)
            global.homeData = res
            if (user.isLogin) {
                isPause = (res as any).current_record.status == 'WAIT_FOR_START'
                dispatch(updateScenario((res as any).current_record))
                dispatch(setConfigs((res as any).time_input_schema));
                dispatch(setScenario((res as any).scenario));
                global.scenario = (res as any).scenario.name;
            }
        })

        getHistory()
    }



    function getHistory() {
        if (user.isLogin)
            getClockRecords({
                page: 1,
                limit: 1,
                part_completed: true
                // completed: true
            }).then(res => {
                setRecords((res as any).data)
            })
    }

    const startArc = (time: number) => {
        var date = new Date(time);
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
    }

    const durationArc = (start_time: number, end_time: number) => {
        var duration = (end_time - start_time) / 1000;
        return duration / (24 * 3600) * 2 * Math.PI;
    }

    function bigRing() {
        var currentRecord = (homeData as any).current_record

        var common = getCommon(null, true)
        common.radius = bigRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        var realRing1 = getSchedule(currentRecord, true, true)
        realRing1.color = ColorType.fast + '66'

        var list: any = []
        if (multiData[0].checked) {

            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.fast.target_start_time),
                durationArc: durationArc(currentRecord.fast.target_start_time, currentRecord.sleep.target_start_time)
            }

            list.push(realRingBig)
        }
        if (multiData[1].checked) {
            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.sleep.target_start_time),
                durationArc: durationArc(currentRecord.sleep.target_start_time, currentRecord.sleep.target_end_time)
            }

            list.push(realRingBig)
        }
        if (multiData[2].checked) {
            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.sleep.target_end_time),
                durationArc: durationArc(currentRecord.sleep.target_end_time, currentRecord.fast.target_end_time)
            }

            list.push(realRingBig)
        }

        var points: any = []
        for (var i = 0; i < 12; i++) {
            var dot: CurrentDot = {
                color: 'red',
                lineWidth: 8,
                borderColor: 'black',
                timestamp: new Date().getTime() + i * 3600 * 1000 * 2
            }
            points.push(dot)
        }
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} stageList={list} dotList={points} canvasId={'testA'} />

    }

    function smallRing() {
        var common = getCommon(null, true)
        common.radius = smallRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        var realRing1 = getSchedule((homeData as any).current_record, false, false)
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={'testB'} />
    }

    function rings() {
        return <View style={{ display: 'flex', flexDirection: 'row', marginLeft: 100, marginBottom: 30 }}>
            <View style={{ position: 'relative', zIndex: 1 }}>
                {
                    bigRing()
                }
                {
                    <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                        {
                            smallRing()
                        }
                    </View>
                }

            </View>
        </View>
    }

    global.indexPageRefresh = () => {
        getCheckData()
    }

    global.showIndexModal = (isShow: boolean, detail: any, debugNode?: any) => {
        global.showModal = isShow
        setDebugInfo(debugNode)
        setShowModal(isShow)
        setModalDetail(detail)
    }

    global.showIndexModal2 = (isShow: boolean, detail: any) => {
        setDebugInfo(null)
        global.showModal = isShow
        setShowModal2(isShow)
        setModalDetail2(detail)
    }

    global.changeTargetDuration = (duration: number, isFast: boolean) => {
        var obj = JSON.parse(JSON.stringify(homeData))
        var record = obj.current_record
        if (isFast) {
            record.fast.target_end_time = record.fast.target_start_time + duration * 60 * 1000
        }
        else {
            record.sleep.target_end_time = record.sleep.target_start_time + duration * 60 * 1000
        }
        setHomeData(obj)
    }

    global.updateFastSleepData = (data: any) => {
        if (data.id == (homeData as any).current_record.id) {
            var obj = JSON.parse(JSON.stringify(homeData))
            obj.current_record = data
            setHomeData(obj)
        }

    }

    function modalContent() {
        if (showModal || showModal2) {
            if (process.env.TARO_ENV == 'weapp') {
                return <Modal
                    testInfo={debugInfo}
                    dismiss={() => {
                        setDebugInfo(null)
                        setShowModal(false);
                        setShowModal2(false);
                    }}
                    confirm={() => { }}>
                    {
                        showModal ? modalDetail : modalDetail2
                    }
                </Modal>
            }
            else if (process.env.TARO_ENV == 'rn') {
                return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                    // overlayStyle='background-color:rgba(0,0,0,0.9)'
                    // custom-style='background-color:#1c1c1c'
                    overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                    customStyle={{ backgroundColor: '#1c1c1c' }}
                    closeOnSlideDown={false}
                    onBeforeEnter={() => {
                        Taro.hideTabBar();
                    }}
                    onBeforeLeave={() => {
                        Taro.showTabBar();
                    }}
                    onClick={() => { alert('b') }}
                    onClickOverlay={() => { alert('a') }}
                    onAfterLeave={() => { setShowModal(false); setShowModal2(false) }}
                    show={showModal || showModal2} round={true} overlay={true} position='bottom'
                >
                    {
                        showModal ? modalDetail : modalDetail2
                    }
                </PageContainer>
            }
        }
        return <View />
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }
    if (!homeData) {
        return <View>
            <Tabbar index={0} />
        </View>
    }

    function more() {
        jumpPage('/pages/common/RecordsHistory?type=time&title=time', 'RecordsHistory', navigation, {
            type: 'time',
            title: 'time'
        })
    }



    function headerView() {
        return <ClockHeader homeData={homeData} />
    }

    var timestamp = new Date().getTime()

    function render() {
        return <Layout type={TemplateType.customHeader} header={headerView()} title={t('page.clock.title')} titleShowStyle={NaviBarTitleShowType.scrollToShow}>

            <View className="index_container">
                <Text className="count">{count}</Text>

                <Box>
                    <View>
                        <IndexItem type="FAST_SLEEP" data={homeData} time={timestamp} showStage={false} />
                        {

                            user.isLogin ? <IndexConsole record={homeData} /> : <StageSelector />
                        }

                    </View>
                </Box>

                {/* {
                    user.isLogin && <DayLight />
                } */}
                <DayNightCard isNight={true} switchChanged={(e) => { }} />
                {
                    user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: rpxToPx(40), }}>
                        {
                            <Text className="discovery1" style={{ marginBottom: 0 }}>{t('feature.track_time_duration.record_fast_sleep.header.latest_record')}</Text>
                        }
                        {
                            process.env.TARO_ENV == 'weapp' && <Text className="fast_sleep_more index_more" onClick={more}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
                        }
                        {
                            process.env.TARO_ENV == 'rn' && <GradientText onClick={more} style={{ fontSize: rpxToPx(32), fontWeight: 'bold' }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</GradientText>
                        }
                    </View>
                }

                {
                    records.length > 0 && <View className="fast_sleep_item_bg">
                        <RecordFastSleep data={records[0]} type='record' index={-20000} />
                    </View>
                }

                {
                    user.isLogin && <View style={{ marginTop: rpxToPx(60), display: 'flex', flexDirection: 'column' }}>
                        <Text className="discovery1" >周统计</Text>
                        <WeekCalendar />
                    </View>
                }

                <View style={{ height: 100 }} />
                {
                    modalContent()
                }

                {
                    homeData && <SegmentPop data={homeData} />
                }
                {
                    homeData && <DurationPicker record={(homeData as any).current_record} />
                }
                <Tabbar index={0} />
            </View>
        </Layout>
    }

    // if (process.env.TARO_ENV == 'rn') {
    //     return <ScrollView>
    //         {
    //             render()
    //         }
    //     </ScrollView>
    // }
    return render()
}