import { YStack, XStack, Image } from 'tamagui';
import CustomText from '@/components/common/CustomText';
import { ChevronRight } from '@tamagui/lucide-icons';
import { TouchableOpacity, StyleSheet } from 'react-native';
import { memo } from 'react';
import { router } from 'expo-router';

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

const ModuleList = memo(({ modules }) => {
    // 国际化
    const { t } = useTranslation('personal');

    // 跳转到模块 或 执行自定义事件
    const toModule = (path, customEvent) => {
        if (path) {
            router.push(path);
        }
        if (customEvent) {
            customEvent();
        }
    }

    return (
        <YStack>
            {modules.map((module, index) => {
                // 是否有点击反馈
                const isClickable = !!module.path || !!module.hasPointer;
                return (
                    <TouchableOpacity
                        key={index}
                        onPress={() => { if (isClickable) toModule(module.path, module.customEvent); }}
                        disabled={!isClickable}
                    >
                        <XStack style={[styles.moduleItem, {
                            borderBottomWidth: index === modules.length - 1 ? 0 : wp(1),
                            borderBottomColor: '#F8F8F8',
                        }]}>
                            <XStack style={styles.moduleItemLeft}>
                                <XStack style={styles.moduleItemContent}>
                                    {module.iconPath && <Image source={module.iconPath} style={styles.moduleItemIcon} />}
                                    <CustomText style={[styles.moduleItemTitle, { color: module.color }]}>{t(module.nameKey)}</CustomText>
                                </XStack>
                                {module.customLeftNode ?? null}
                            </XStack>
                            <XStack style={styles.moduleItemRight}>
                                {module.customRightNode ?? null}
                                {module.hasPointer && <ChevronRight color={module.color || '#747474'} size={wp(20)} />}
                            </XStack>
                        </XStack>
                    </TouchableOpacity>
                );
            })}
        </YStack>
    )
})

export default ModuleList;

const styles = StyleSheet.create({
    moduleItem: {
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: wp(18),
        paddingLeft: wp(6),
        paddingRight: wp(12),
    },
    moduleItemLeft: {
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    moduleItemContent: {
        gap: wp(10),
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    moduleItemRight: {
        alignItems: 'center',
        justifyContent: 'flex-end',
        gap: wp(16),
    },
    moduleItemIcon: {
        width: wp(20),
        height: wp(20),
    },
    moduleItemTitle: {
        fontSize: sp(14),
        fontFamily: 'Medium',
        color: '#191919',
        lineHeight: wp(20),
    }
})