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 { getBgRing, getCommon, getDot, getSchedule } 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 { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import TitleView from "@/features/trackTimeDuration/components/TitleView";
import ClockHeader from "@/features/trackTimeDuration/components/ClockHeader";

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 [showErrorPage, setErrorPage] = useState(false)
    const [data, setData] = useState(null)
    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 [isModal1, setIsModal1] = useState(false)
    const [debugInfo, setDebugInfo] = useState(null)

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

    const [loaded, setLoaded] = useState(false)


    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');
        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)
            setLoaded(true)
            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(setScenario((res as any).fast_sleep.scenario));
            }
        })

        getHistory()
    }



    function getHistory() {
        if (user.isLogin)
            getClockRecords({
                page: 1,
                limit: 1,
                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).fast_sleep.current_record

        var common = getCommon(null, true)
        common.radius = 42;
        common.lineWidth = 9;
        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 = 28;
        common.lineWidth = 9;
        var bgRing = getBgRing()
        var realRing1 = getSchedule((homeData as any).fast_sleep.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
        setIsModal1(true)
        setDebugInfo(debugNode)
        setShowModal(isShow)
        setModalDetail(detail)
    }

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

    global.changeTargetDuration = (duration: number, isFast: boolean) => {
        var obj = JSON.parse(JSON.stringify(homeData))
        var record = obj.fast_sleep.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)
    }

    function modalContent() {
        if (showModal || showModal2) {
            if (process.env.TARO_ENV == 'weapp') {
                return <Modal
                    testInfo={debugInfo}
                    dismiss={() => {
                        setDebugInfo(null)
                        setShowModal(false); setShowModal2(false)
                    }}
                    confirm={() => { }}>
                    {
                        isModal1 ? 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'
                >
                    {
                        isModal1 ? 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>
                {/* <Text className="discovery">探索</Text> */}
                <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
                <Swiper className='swiper1' indicatorColor='#333'
                    indicatorActiveColor='#999'
                    current={0}
                    autoplay={false}
                    duration={300}
                    interval={300}
                    indicator-offset={[0, -30]}
                    indicator-height={30}
                    indicatorDots={(homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START'}
                    onChange={(e) => {
                        var pageIndex = e.detail.current
                        global.changeMixIndex(pageIndex)
                    }}
                >
                    <SwiperItem className='swiperItem'>
                        <IndexConsole record={(homeData as any).fast_sleep} />

                    </SwiperItem>

                    {
                        (homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START' &&
                        <SwiperItem className='swiperItem'>
                            <View>
                                {
                                    isMulti ? <View>
                                        {
                                            multiData.map((item, index) => {
                                                return <View className={item.checked ? "single_check_sel" : "single_check_nor"} onClick={() => {
                                                    item.checked = !item.checked
                                                    global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
                                                    setMultiData(JSON.parse(JSON.stringify(multiData)))
                                                    setCount((prevCounter) => prevCounter + 1)
                                                }}>
                                                    <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
                                                    {
                                                        item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                                                            <IconPlus color={ColorType.fast} />
                                                    }
                                                </View>
                                            })
                                        }
                                    </View> : <View>

                                        <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(0); global.updateMixItem([true, false, false]); setCount((prevCounter) => prevCounter + 1) }}>
                                            <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
                                            {
                                                selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                            }
                                        </View>
                                        <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(1); global.updateMixItem([false, true, false]); setCount((prevCounter) => prevCounter + 1) }}>
                                            <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
                                            {
                                                selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                            }
                                        </View>
                                        <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(2); global.updateMixItem([false, false, true]); setCount((prevCounter) => prevCounter + 1) }}>
                                            <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
                                            {
                                                selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                            }
                                        </View>
                                    </View>
                                }
                                <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', paddingRight: rpxToPx(46), width: rpxToPx(750), boxSizing: 'border-box' }}>
                                    <View style={{ flex: 1 }} />
                                    <Text style={{ marginRight: 10 }}>多选</Text>
                                    <Switch color={ColorType.fast} onChange={(e) => {
                                        setIsMulti(e.detail.value)
                                        if (e.detail.value) {
                                            global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
                                        }
                                        else {
                                            global.updateMixItem([selIndex == 0, selIndex == 1, selIndex == 2])
                                        }
                                        setCount((prevCounter) => prevCounter + 1)
                                    }} />
                                </View>
                            </View>
                        </SwiperItem>
                    }

                </Swiper>
                {
                    user.isLogin && <DayLight />
                }
                {
                    user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                        {
                            <Text className="discovery">最近</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>
                        <Text className="discovery">周统计</Text>
                        <WeekCalendar />
                    </View>
                }

                <View style={{ height: 100 }} />
                {
                    modalContent()
                }
                <Tabbar index={0} />
            </View>
        </Layout>
    }

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