import { XStack, YStack, Image } from 'tamagui';
import CustomText from '@/components/common/CustomText';
import { StyleSheet, Pressable, TouchableOpacity } from 'react-native';
import { memo, useCallback } from 'react';
import { router } from 'expo-router';
import { useCameraPermission } from 'react-native-vision-camera';
import { showError } from '@/utils/ui/toast';

// 引入屏幕适配
import { wp, sp } from '@/utils/ui/screenUtils';
// 引入国际化
import { useTranslation } from 'react-i18next';

// 引入用户信息
import { useAuthStore } from '@/stores';

//自定义组件
import CustomAvatar from '@/components/ui/CustomAvatar';

const UserHeader = memo(() => {
    // 用户信息
    const userInfo = useAuthStore(state => state.getUser());
    // 国际化
    const { t } = useTranslation('personal');
    // 相机权限
    const { hasPermission, requestPermission } = useCameraPermission();

    // 处理扫码按钮点击
    const handleScanPress = useCallback(async () => {
        try {
            // 检查相机权限
            if (!hasPermission) {
                const granted = await requestPermission();
                if (!granted) {
                    showError('需要相机权限，请手动前往设置授权');
                    return;
                }
            }

            // 权限已获取，跳转到扫码页面
            router.push('/scan');
        } catch (error) {
            showError('获取相机权限失败');
        }
    }, [hasPermission, requestPermission]);

    // 点击跳转到重置头像页面
    const toResetAvatar = useCallback(() => {
        router.push('/personal/resetAvatar');
    }, []);

    return (
        <XStack style={styles.userHeaderArea}>
            <XStack style={styles.userHeaderContent}>
                <TouchableOpacity onPress={toResetAvatar}>
                    <CustomAvatar
                        mode={1}
                        userName={userInfo?.NickName}
                        avatar={userInfo?.Avatar}
                        avatarKey={userInfo?.ID}
                        groupType={1}
                        size={wp(77)}
                        circular={false}
                        style={styles.userAvatar}
                    />
                </TouchableOpacity>
                <YStack style={styles.userInfo}>
                    <CustomText style={styles.userName}>{userInfo?.NickName}</CustomText>
                    <CustomText style={styles.userJobNum}>{`${t('userInfo.jobNum')}: ${userInfo?.JobNum}`}</CustomText>
                </YStack>
            </XStack>
            <Pressable onPress={handleScanPress} hitSlop={10}>
                <Image style={styles.userHeaderRightIcon} source={require('@/assets/images/personal/scanQRCode.png')} />
            </Pressable>
        </XStack>
    )
})

export default UserHeader;

const styles = StyleSheet.create({
    userHeaderArea: {
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    userHeaderContent: {
        gap: wp(16),
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    userAvatar: {
        borderRadius: wp(8),
    },
    userInfo: {
        gap: wp(6),
        alignItems: 'flex-start',
        justifyContent: 'center',
    },
    userName: {
        fontSize: sp(20),
        fontFamily: 'Bold',
        color: '#191919',
        lineHeight: wp(28),
    },
    userJobNum: {
        fontSize: sp(14),
        fontFamily: 'Medium',
        color: '#B4B4B4',
        lineHeight: wp(20),
    },
    userHeaderRightIcon: {
        width: wp(40),
        height: wp(40),
    },
});