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

import { View, Text, ScrollView } from '@tarojs/components'
import './Streaks.scss'
import { rpxToPx } from '@/utils/tools'
import { ColorType } from '@/context/themes/color'
import { useTranslation } from 'react-i18next'
import { jumpPage } from '../hooks/Common'
import { useEffect, useState } from 'react'
import { TimeFormatter } from '@/utils/time_format'
import showAlert from '@/components/basic/Alert'

let useNavigation;
let LinearGradient;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
    LinearGradient = require('react-native-linear-gradient').default
}

export default function StreakItem(props: { isFast: boolean, data: any }) {
    const { t } = useTranslation()
    const [left, setLeft] = useState(500)
    const [points, setPoints] = useState([false, false, false, false, false, false, false])
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (props.data.current.num_days > 6) {
            var array = Array.from({ length: props.data.current.num_days }, () => true)
            array.push(false)
            setPoints(array)
        }
        else {
            let newPoints = [false, false, false, false, false, false, false]
            for (let i = 0; i < props.data.current.num_days; i++) {
                newPoints[i] = true
            }
            setPoints(newPoints)
        }
        setTimeout(() => {
            setLeft((prevCounter) => prevCounter + 1)
        }, 300)

    }, [props.data])




    function goDetail() {
        jumpPage(`/pages/clock/StreakDetail?isFast=${props.isFast ? 1 : 0}&data=${JSON.stringify(props.data)}`,
            'StreakDetail',
            navigation,
            {
                isFast: props.isFast ? 1 : 0,
                data: JSON.stringify(props.data)
            })
        // jumpPage('/pages/clock/StreakDetail?isFast='+props.isFast+'&data=' + JSON.stringify(props.data), 'StreakDetail', navigation)
    }

    function day(num) {
        if (global.language == 'en') {
            return num == 1 ? 'day' : 'days'
        }
        return '天'
    }

    function nextStatus() {
        const { status } = props.data.current
        if (status == 'EXPIRED') {
            return t('feature.track_time_duration.streaks.last_reset')
        }
        else {
            return t('feature.track_time_duration.streaks.next_reset')
        }
    }

    function getTime() {
        const { status } = props.data.current
        var ts: any = null;
        switch (status) {
            case 'EXPIRED':
                ts = props.data.current.prev_reset_ts
                break;
            case 'ACTIVE':
                ts = props.data.current.reset_ts
                break;
            case 'NOT_DETERMINED':
            case 'HEADS_UP':
                return t('feature.track_time_duration.streaks.not_determined');
        }

        var date = new Date(ts)
        var time = TimeFormatter.padZero(date.getHours()) + ':' + TimeFormatter.padZero(date.getMinutes())
        if (TimeFormatter.dateDescription(ts, true) == 'Today') {
            return 'Tonight ' + time
        }
        if (TimeFormatter.dateDescription(ts, true) == '今天') {
            return '今晚 ' + time
        }
        return TimeFormatter.dateDescription(ts, true) + ' ' + time

    }

    function tapDetail() {
        showAlert({
            title: t('feature.track_time_duration.streaks.alert_title'),
            content: t('feature.track_time_duration.streaks.alert_content'),
            showCancel: false,
            confirmText: t('feature.track_time_duration.streaks.alert_confirm')
        })
    }

    function dayUnit(num) {
        if (global.language == 'en') {
            return num == 1 ? 'day' : 'days'
        }
        return '天'
    }


    return <View className='streaks_item' onClick={goDetail}>
        <View className='streaks_item_header'>
            <Text className='streak_item_type'>{props.isFast ? t('feature.track_time_duration.streaks.faststreak') : t('feature.track_time_duration.streaks.sleepstreak')}</Text>
            {/* <IconShare2 width={rpxToPx(32)} color={props.isFast ? ColorType.fast : ColorType.sleep} /> */}
        </View>
        <View style={{
            flexDirection: 'row',
            display: 'flex',
            marginTop: rpxToPx(6),
            alignItems: 'flex-end'
        }}>
            <Text className='streak_index'
                style={{ color: props.data.current.num_days == 0 ? '#ffffff99' : props.isFast ? ColorType.fast : ColorType.sleep }}
            >{props.data.current.num_days}</Text>
            <Text className='streak_index_day'
                style={{
                    color: props.data.current.num_days == 0 ? '#ffffff99' : props.isFast ? ColorType.fast : ColorType.sleep,
                    fontSize: global.language == 'en' ? rpxToPx(40) : rpxToPx(32)
                }}>
                {dayUnit(props.data.current.num_days)}
            </Text>
        </View>

        {
            props.data.current.num_days < 7 ? <View className='streak_item_point_bg'>
                {
                    points.map((item, index) => {
                        return <View className='streak_item_point' key={index}
                            style={{
                                backgroundColor: item ? props.isFast ? ColorType.fast : ColorType.sleep : 'rgba(216, 216, 216, 0.1)',
                                width: rpxToPx(28),
                                height: rpxToPx(28),
                                borderRadius: rpxToPx(14),
                            }}></View>
                    })
                }
            </View> :
                <ScrollView scrollX className='scroll_point_bg'
                    style={{ width: rpxToPx(270), height: rpxToPx(28) }}
                    showScrollbar={false}
                    enableFlex enhanced
                    scrollLeft={left}
                    showsHorizontalScrollIndicator={false}>
                    <View style={{ flexDirection: 'row', display: 'flex', marginTop: 0 }}>
                        {
                            points.map((item, index) => {
                                return <View className='streak_item_point' key={index}
                                    style={{
                                        backgroundColor: item ? props.isFast ? ColorType.fast : ColorType.sleep : 'rgba(216, 216, 216, 0.1)',
                                        marginRight: item ? rpxToPx(8) : 0,
                                        width: rpxToPx(28),
                                        height: rpxToPx(28),
                                        borderRadius: rpxToPx(14),
                                    }}></View>
                            })
                        }
                    </View>
                </ScrollView>
        }
        <View className='streak_next'>
            {
                process.env.TARO_ENV == 'weapp' ? <View className='streak_line_left' /> :
                    <LinearGradient style={{
                        flex: 1,
                        height: 1,
                        marginRight: rpxToPx(20)
                    }} colors={['#2f2f2f00', '#2f2f2fff']}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 0 }} />
            }


            <Text className='streak_next_text'>{nextStatus()}</Text>
            {
                process.env.TARO_ENV == 'weapp' ?<View className='streak_line_right' />:
                <LinearGradient style={{
                    flex: 1,
                    height: 1,
                    marginLeft: rpxToPx(20)
                }} colors={['#2f2f2fff', '#2f2f2f00']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }} />
            }
            
        </View>
        <Text className='streak_status'>{getTime()}</Text>
        <View className='streak_bottom'>
            {
                props.data.current.status == 'ACTIVE' && <View className='streak_bottom_info' style={{ backgroundColor: 'red' }}>
                    <Text className='streak_bottom_info_text'>{TimeFormatter.countdown(props.data.current.reset_ts)}</Text>
                </View>
            }
            {
                props.data.current.status == 'HEADS_UP' && <View className='streak_bottom_info' style={{ backgroundColor: ColorType.sleep }} onClick={(e) => {
                    if (process.env.TARO_ENV == 'weapp')
                        e.stopPropagation()
                    tapDetail()
                }}>
                    <Text className='streak_bottom_info_text'>{t('feature.track_time_duration.streaks.heads_up')}</Text>
                </View>
            }

        </View>

        {/* <View style={{ flexDirection: 'row', height: rpxToPx(36), overflow: 'hidden',alignItems:'flex-end' }}>
            <Text className='streak_item_note'>{t('feature.track_time_duration.streaks.current')}</Text>
            {
                props.data.current.num_days == 0 ? <Text className='streak_item_value' style={{ color: '#fff', opacity: 0.4,marginBottom:-2 }}>{props.data.current.num_days}</Text> :
                    <Text className='streak_item_value' style={{ color: props.isFast ? ColorType.fast : ColorType.sleep,marginBottom:-2 }}>{props.data.current.num_days}</Text>
            }
            {
                props.data.current.num_days == 0 ? <Text className='streak_item_note' style={{ color: '#fff', opacity: 0.4, fontWeight: 'bold' }}>{day(props.data.current.num_days)}</Text> :
                    <Text className='streak_item_note' style={{ color: props.isFast ? ColorType.fast : ColorType.sleep, opacity: 1, fontWeight: 'bold' }}>{day(props.data.current.num_days)}</Text>
            }


        </View> */}
        {/* <View style={{ marginTop: rpxToPx(16), flexDirection: 'row', height: rpxToPx(36), overflow: 'hidden',alignItems:'flex-end' }}>
            <Text className='streak_item_note'>{t('feature.track_time_duration.streaks.longest')}</Text>
            <Text className='streak_item_value' style={{ color: '#fff', opacity: 0.4,marginBottom:-2 }}>{props.data.longest.num_days}</Text>
            <Text className='streak_item_note' style={{ fontWeight: 'bold' }}>{day(props.data.longest.num_days)}</Text>
        </View> */}
    </View>
}