import { StyleSheet, TouchableOpacity } from 'react-native';
import { useEffect, useState } from 'react';
import { RadialSlider } from 'react-native-radial-slider';
import { router } from 'expo-router';
import { useTeamAttendanceStore, useAppStore } from '@/stores';

//国际化
import { useTranslation } from '@/node_modules/react-i18next';

// 引入屏幕适配
import { sp, wp } from '@/utils/ui/screenUtils';

const RadialProgress = () => {
    //获取主色
    const primaryColor = useAppStore(s => s.primary)

    // 读取接口加载状态与更新时间
    const loadingCount = useTeamAttendanceStore(s => s.loadingCount)
    const isLoading = (loadingCount || 0) > 0

    //国际化
    const { t } = useTranslation('attendance');

    // 订阅团队打卡数据
    const teamCollection_day = useTeamAttendanceStore(s => s.teamCollection_day)

    return (
        <TouchableOpacity
            disabled={isLoading}
            onPress={() => {
                router.push('/attendance/teamAttendance/teamCheckIn')
            }}
        >
            <RadialSlider
                // 隐藏滑块线
                isHideLines={true}
                // 隐藏控制数值按钮
                isHideButtons={true}
                // 隐藏尾部文本
                isHideTailText={true}
                // 开口弧度
                openingRadian={Math.PI / 2}
                // 半径
                radius={wp(100)}
                // 隐藏滑块上的可拖动数值控制按钮
                thumbRadius={0}
                // 滑块轨道颜色
                sliderTrackColor={'#F5F5F5'}
                // 选定轨道的渐变色
                linearGradient={[{ offset: '0%', color: '#E390B8' }, { offset: '100%', color: primaryColor }]}

                // 数值单位
                unit={`/ ${Number(teamCollection_day?.teamWorkNum) || 0}`}
                // 中心区域样式
                centerContentStyle={styles.centerContentStyle}
                // 数值样式
                valueStyle={[styles.valueStyle, {
                    color: primaryColor
                }]}
                // 数值单位样式
                unitStyle={[styles.valueStyle, {
                    color: primaryColor
                }]}
                // 副标题
                subTitle={t('teamAttendance.progress.subTitle')}
                // 副标题样式
                subTitleStyle={styles.subTitleStyle}

                // 最小值
                min={0}
                // 数值
                value={Number(teamCollection_day?.teamRealWorkNum) || 0}
                // 最大值
                max={Number(teamCollection_day?.teamWorkNum) || 1}
            />
        </TouchableOpacity>
    )
}
export default RadialProgress;

const styles = StyleSheet.create({
    valueStyle: {
        fontSize: sp(22),
        fontFamily: 'Medium',
        lineHeight: wp(30),
    },
    centerContentStyle: {
        marginTop: -wp(55),
    },
    subTitleStyle: {
        fontSize: sp(12),
        fontFamily: 'Medium',
        lineHeight: wp(17),
        color: '#191919',
    }
});