import { Images } from '@/constants/images';
import { ImageBackground } from 'expo-image';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export interface DollResultModalRef {
    show: (data: any[]) => void;
    close: () => void;
}

export const DollResultModal = forwardRef<DollResultModalRef>((_, ref) => {
    const [visible, setVisible] = useState(false);
    const [prizeResult, setPrizeResult] = useState<any[]>([]);

    useImperativeHandle(ref, () => ({
        show: (data) => {
            setPrizeResult(data);
            setVisible(true);
        },
        close: () => setVisible(false),
    }));

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <View style={styles.contentContainer}>
                    <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
                        <Image source={{ uri: Images.common.closeBut }} style={styles.closeIcon} />
                    </TouchableOpacity>

                    <View style={styles.wrapper}>
                        {prizeResult.length === 1 ? (
                            <ImageBackground source={{ uri: Images.welfare.resultBg }} style={styles.prizeOneBg} resizeMode="stretch">
                                <View style={styles.box}>
                                    <Text style={styles.textOne} numberOfLines={1}>{prizeResult[0].name}</Text>
                                    <View style={styles.imgOneBox}>
                                        <Image source={{ uri: prizeResult[0].cover }} style={styles.imgOne} resizeMode="contain" />
                                    </View>
                                </View>
                            </ImageBackground>
                        ) : (
                            <View style={styles.prizeFiveContainer}>
                                {prizeResult.map((item, index) => (
                                    <ImageBackground key={item.spuId || index} source={{ uri: Images.welfare.resultBg }} style={[styles.prizeItemBg, (index + 1) % 3 === 0 && styles.noRightMargin]} resizeMode="stretch">
                                        <View style={styles.box}>
                                            <Text style={styles.textFive} numberOfLines={1}>{item.name}</Text>
                                            <View style={styles.imgFiveBox}>
                                                <Image source={{ uri: item.cover }} style={styles.imgFive} resizeMode="contain" />
                                            </View>
                                        </View>
                                    </ImageBackground>
                                ))}
                            </View>
                        )}
                    </View>
                </View>
            </View>
        </Modal>
    );
});

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentContainer: {
        width: '100%',
    },
    closeBtn: {
        alignSelf: 'flex-end',
        marginRight: 30, // Adjust as needed
        marginBottom: 10,
    },
    closeIcon: {
        width: 30,
        height: 30,
    },
    wrapper: {
        alignItems: 'center',
        width: '100%',
    },
    prizeOneBg: {
        width: 293, // 586rpx
        height: 290, // Approx based on padding
        paddingTop: 75, // 150rpx
        paddingBottom: 94, // 188rpx
        alignItems: 'center',
        justifyContent: 'center',
    },
    box: {
        height: '100%',
        alignItems: 'center',
        width: '100%',
    },
    textOne: {
        color: '#444',
        fontSize: 15,
        fontWeight: 'bold',
        textAlign: 'center',
        width: '80%',
    },
    imgOneBox: {
        marginTop: 27, // 54rpx
        width: 150, // 300rpx
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    },
    imgOne: {
        width: '100%',
        height: '100%',
    },
    prizeFiveContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        width: '100%',
        paddingHorizontal: 20,
    },
    prizeItemBg: {
        width: 102, // 204rpx
        height: 130, // 260rpx
        marginRight: 9, // 18rpx
        marginBottom: 10, // 20rpx
        paddingTop: 27, // 54rpx
        alignItems: 'center',
    },
    noRightMargin: {
        marginRight: 0,
    },
    textFive: {
        color: '#444',
        fontWeight: 'bold',
        fontSize: 10,
        textAlign: 'center',
        width: '90%',
    },
    imgFiveBox: {
        marginTop: -15, // -30rpx
        width: 80, // 160rpx
        height: 80,
        justifyContent: 'center',
        alignItems: 'center',
    },
    imgFive: {
        width: '100%',
        height: '100%',
    }
});