taro/src/features/trackTimeDuration/components/WeekCalendar.tsx

import { View, ScrollView, Text, Swiper, SwiperItem } from "@tarojs/components";
import './WeekCalendar.scss'
import { useEffect, useState, useMemo, memo, useRef } from "react";
import { ColorType } from "@/context/themes/color";
import WeekCalendarItem from "./WeekCalendarItem";
import { rpxToPx } from "@/utils/tools";
import { TimeFormatter } from "@/utils/time_format";
import { clockSummaryStats } from "@/services/trackTimeDuration";
import { useTranslation } from "react-i18next";
import { IconBigArrow } from "@/components/basic/Icons";
import dayjs from "dayjs";

let pageIndex = 0
let lastFastValue = 0;
let lastSleepValue = 0;

let lastOffset;

let LinearGradient;

if (process.env.TARO_ENV == 'rn') {

    LinearGradient = require('react-native-linear-gradient').default
}


const WeekCalendar = memo((props: { isFastSleep: boolean }) => {
    const [calendars, setCalendars] = useState<any>([])
    const [current, setCurrent] = useState(0)
    const [summary, setSummary] = useState<any>(null)
    const [calendarData, setCalendarData] = useState<any>(null)
    const [minTime, setMinTime] = useState(0)
    const [left, setLeft] = useState(0)
    const [isLoading, setIsLoading] = useState(false)
    const { t } = useTranslation()
    const ref = useRef(null)
    const pageSize = 40

    useEffect(() => {
        // pageIndex = -1
        getRecords()
    }, [])

    global.refrehWeekly = () => {
        // getRecords()
        if (isLoading) return
        pageIndex = 0;
        setIsLoading(true)
        var timestamp = TimeFormatter.getMondayTimestamp()
        var now = new Date()
        if (now.getDay() == 0 && now.getHours() >= 0 && now.getHours() < 12) {
            timestamp -= 24 * 3600 * 1000 * 7
        }
        var list: any = []
        var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
        if (!props.isFastSleep){
            offset = pageIndex * pageSize * 24 * 3600 * 1000
        }
        for (var i = 0; i < pageSize; i++) {
            list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
        }
        clockSummaryStats({ times: list.join(';') }).then(res => {
            var list = (res as any).data.reverse()
            if (pageIndex == 0) {
                setCalendars(list)
                setSummary(list[current].summary_stats ? list[current].summary_stats : null)
                setCalendarData(list[current])

                setIsLoading(false)
            }

        })
    }

    function getRecords() {
        if (isLoading) return
        pageIndex = 0;
        setIsLoading(true)
        var timestamp = TimeFormatter.getMondayTimestamp()
        var now = new Date()
        if (now.getDay() == 0 && now.getHours() >= 0 && now.getHours() < 12) {
            timestamp -= 24 * 3600 * 1000 * 7
        }
        var list: any = []
        var offset = 12 * 3600 * 1000 + pageIndex * pageSize * 24 * 3600 * 1000
        if (!props.isFastSleep){
            offset = pageIndex * pageSize * 24 * 3600 * 1000
        }
        for (var i = 0; i < pageSize; i++) {
            list.push(`${i + pageIndex * pageSize},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
        }
        clockSummaryStats({ times: list.join(';') }).then(res => {
            var list = (res as any).data.reverse()
            if (list.length > 1) {
                lastFastValue = list[list.length - 2].summary_stats.fast.avg
                lastSleepValue = list[list.length - 2].summary_stats.sleep.avg
            }

            if (pageIndex == 0) {
                setCalendars(list)
                setCurrent(list.length - 1)
                setSummary(list[list.length - 1].summary_stats ? list[list.length - 1].summary_stats : null)
                setCalendarData(list[list.length - 1])
                setMinTime((res as any).extra.real_start_time_min)
                setLeft((list.length - 1) * parseInt(rpxToPx(658) + ''))
                setIsLoading(false);
                if (ref.current) {
                    (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
                    setTimeout(() => {
                        (ref.current as any).scrollToOffset((list.length - 1) * parseInt(rpxToPx(658) + ''), false);
                    }, 500)
                }
            }
            else {

            }

        })
        // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
    }

    function dragStart(e) {
        // fingerDrag = true
    }

    function dragEnd(e) {
        // fingerDrag = false
    }

    function onScroll(e) {
        // if (!fingerDrag && process.env.TARO_ENV == 'weapp') return
        if (lastOffset && Math.abs(lastOffset - e.detail.scrollLeft) > 300) {
            setLeft(lastOffset)
            return
        }
        // isScrolling = true
        var x = e.detail.scrollLeft + 5
        lastOffset = e.detail.scrollLeft

        // var page = parseInt(x / parseInt(rpxToPx(658) + '') + '')
        var page = Math.round(x / parseInt(rpxToPx(658) + ''))
        console.log(page, x)

        if (current != page && page < calendars.length && page >= 0) {
            lastFastValue = calendars[current].summary_stats.fast.avg
            lastSleepValue = calendars[current].summary_stats.sleep.avg
            setCurrent(page)
            setSummary(calendars[page].summary_stats ? calendars[page].summary_stats : null)
            setCalendarData(calendars[page])
            // if (page <= 0) {

            //     getRecords();
            // }
        }
        // if (scrollTimer)
        //     clearTimeout(scrollTimer);

        // scrollTimer = setTimeout(() => {
        //     isScrolling = false
        //     fingerDrag = false;
        // }, 300) as any
    }

    function onChange(e) {
        var page = e.detail.current
        lastFastValue = calendars[current].summary_stats.fast.avg
        lastSleepValue = calendars[current].summary_stats.sleep.avg
        setCurrent(page)
        setSummary(calendars[page].summary_stats ? calendars[page].summary_stats : null)
        setCalendarData(calendars[page])
    }


    function getDate(timestamp) {
        var date = new Date(timestamp)
        if (global.language == 'en') {
            return dayjs(timestamp).format('MMM D')
        }
        return `${date.getMonth() + 1}月${date.getDate()}日`
    }

    function getWeekDuration() {
        if (global.language == 'en') {
            if (!props.isFastSleep) {
                return `${t('feature.common.day_of_week_full.mon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.mon')}, ${getDate(calendarData.end)}`
            }
            return `${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.afternoon')}, ${getDate(calendarData.start)} - ${t('feature.common.day_of_week_full.sun')} ${t('feature.common.time_desc.morning')}, ${getDate(calendarData.end)}`
        }
        if (!props.isFastSleep) {
            return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.mon')} - ${getDate(calendarData.end)} ${t('feature.common.day_of_week_full.mon')}`
        }
        return `${getDate(calendarData.start)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.afternoon')} - ${getDate(calendarData.end)} ${t('feature.common.day_of_week_full.sun')}${t('feature.common.time_desc.morning')}`
    }

    function getWeekIndex() {
        // style={{ opacity: current == calendars.length - 1 ? 1 : 0 }}
        if (current == calendars.length - 1) {
            return t('feature.common.week_desc.current_week')
        }
        else if (current == calendars.length - 2) {
            return t('feature.common.week_desc.last_week')
        }
        else {
            return t('feature.common.week_desc.weeks_ago', { index: calendars.length - current - 1 })
        }
    }

    function showWeeklyItem(index) {
        if (process.env.TARO_ENV == 'weapp') {
            if (index >= current - 1 && index <= current + 1) {
                return true
            }
            return false
        }
        if (index >= current - 2 && index <= current + 2) {
            return true
        }
        return false
    }

    if (!calendarData)
        return <View />
    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View className="calendar_summary_top">
            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                {
                    !summary || summary.fast.avg == 0 ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
                        <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }} />
                    </View> :
                        <View className={lastFastValue > summary.fast.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food }}>
                            <IconBigArrow color="#fff" width={rpxToPx(32)} />
                        </View>
                }
                <View className="calendar_summary_item">
                    <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.fast_average') : t('feature.track_time_duration.weekly.eat_average')}</Text>
                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.fast : ColorType.food }}>{!summary || summary.fast.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.fast.avg)}</Text>
                </View>
            </View>
            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                {
                    !summary || summary.sleep.avg == 0 ? <View className="calendar-empty-bg" style={{ borderColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
                        <View className="calendar-empty-line" style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }} />
                    </View> :
                        <View className={lastSleepValue > summary.sleep.avg ? 'calendar-arrow-bg-down' : 'calendar-arrow-bg'} style={{ backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>
                            <IconBigArrow color="#fff" width={rpxToPx(32)} />
                        </View>
                }
                <View className="calendar_summary_item">
                    <Text className="calendar_summary_title">{props.isFastSleep ? t('feature.track_time_duration.weekly.sleep_average') : t('feature.track_time_duration.weekly.wake_average')}</Text>
                    <Text className="calendar_summary_value" style={{ color: props.isFastSleep ? ColorType.sleep : ColorType.activity }}>{!summary || summary.sleep.avg == 0 ? t('feature.track_time_duration.record_fast_sleep.none') : TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + summary.sleep.avg)}</Text>
                </View>
            </View>



        </View>
        <View style={{ display: 'flex', flexDirection: 'row', marginBottom: rpxToPx(16), alignItems: 'center' }}>
            <View className="calendar_this_week" >{getWeekIndex()}</View>
            <Text className="calendar_summary_desc">{getWeekDuration()}</Text>

        </View>

        <View className="chart_bg">
            <View className="chart_bg">
                {
                    process.env.TARO_ENV == 'weapp' ? <View className="chart_content_bg" style={{
                        left: parseInt(rpxToPx(46) + ''),
                        right: parseInt(rpxToPx(46) + ''),
                        top: parseInt(rpxToPx(60) + ''),
                        bottom: parseInt(rpxToPx(60) + ''),
                        width: parseInt(rpxToPx(658) + ''),
                    }} /> :
                        <LinearGradient style={{
                            position: 'absolute',
                            left: parseInt(rpxToPx(46) + ''),
                            right: parseInt(rpxToPx(46) + ''),
                            top: parseInt(rpxToPx(60) + ''),
                            bottom: parseInt(rpxToPx(60) + ''),
                            width: parseInt(rpxToPx(658) + ''),
                            zIndex: -1
                        }}
                            colors={['#1C1C1C', '#000000', '#1C1C1C']}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 0, y: 1 }} />
                }

                <View>
                    <Swiper
                        current={current}
                        onChange={onChange}
                        style={{
                            marginLeft: parseInt(rpxToPx(46) + ''),
                            width: parseInt(rpxToPx(658) + ''),
                            height: parseInt(rpxToPx(520) + ''),
                            flexDirection: 'row', display: 'flex',
                        }}>
                        {
                            calendars.map((item, index) => {
                                return <SwiperItem key={index}>
                                    {
                                        showWeeklyItem(index) ?
                                            <WeekCalendarItem data={item} isCurrentWeek={index == calendars.length - 1} isFastSleep={props.isFastSleep} /> :
                                            <View style={{ width: parseInt(rpxToPx(658) + ''), flexShrink: 0 }} />
                                    }
                                </SwiperItem>
                            })
                        }
                    </Swiper>
                </View>
                {
                    props.isFastSleep ? <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
                        <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>12:00</Text>
                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>18:00</Text>
                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>24:00</Text>
                        <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>06:00</Text>
                        <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>12:00</Text>
                    </View> :
                        <View className="chart_times" style={{ marginTop: parseInt(rpxToPx(60) + ''), marginBottom: parseInt(rpxToPx(60) + '') }}>
                            <Text className="chart_times_txt" style={{ left: 0, top: 0 }}>00:00</Text>
                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(100 - 7) + '') }}>06:00</Text>
                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(200 - 5) + '') }}>12:00</Text>
                            <Text className="chart_times_txt" style={{ left: 0, top: parseInt(rpxToPx(300 - 5) + '') }}>18:00</Text>
                            <Text className="chart_times_txt" style={{ left: 0, bottom: 0 }}>24:00</Text>
                        </View>
                }

            </View>

        </View>

    </View>
})

export default WeekCalendar;