import { Ionicons } from '@expo/vector-icons';
import { ImageBackground } from 'expo-image';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import {
    Modal,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

import { Images } from '@/constants/images';

export interface RuleModalRef {
    show: () => void;
    close: () => void;
}

export const RuleModal = forwardRef<RuleModalRef>((_, ref) => {
    const [visible, setVisible] = useState(false);

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

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <View style={styles.contentContainer}>
                    <ImageBackground
                        source={{ uri: Images.mine.dialogContentBg }}
                        style={styles.bgContainer}
                        resizeMode="stretch"
                    >
                        <View style={styles.textContent}>
                            <Text style={styles.text}>1.房间仅可用于免费赠送手办或其它礼品</Text>
                            <Text style={styles.text}>2.您可以查看完整版《用户协议》和《隐私政策》 以便了解我们收集、使用、存储信息的情况，以及对信息的保护措施</Text>
                            <Text style={styles.text}>3.不支持设置私密房间</Text>
                            <Text style={styles.text}>4.参与热度仅代表房间热度，不代表具体人数</Text>
                            <Text style={[styles.text, { marginTop: 10, color: '#999', fontSize: 10 }]}>特别声明：本应用内包含的所有抽奖及活动（包括APP专享活动等）均由艾斯潮盒官方发起，与苹果公司（Apple Inc.）无关。苹果公司不是上述活动的赞助商，也没有以任何形式参与上述活动。</Text>
                        </View>
                    </ImageBackground>
                    <View style={styles.closeContainer}>
                        <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
                            <Ionicons name="close" size={20} color="#444" />
                        </TouchableOpacity>
                    </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%',
        alignItems: 'center',
    },
    bgContainer: {
        width: 300, // 600rpx approx
        height: 340, // increased for disclaimer
        justifyContent: 'flex-start',
        paddingHorizontal: 25, // 50rpx
        paddingTop: 75, // 150rpx
    },
    textContent: {
        width: '100%',
    },
    text: {
        fontSize: 12,
        color: '#333',
        marginBottom: 8,
        lineHeight: 18,
    },
    closeContainer: {
        marginTop: 20,
        alignItems: 'center',
    },
    closeBtn: {
        width: 32,
        height: 32,
        borderRadius: 16,
        backgroundColor: '#D8D8D8',
        justifyContent: 'center',
        alignItems: 'center',
    },
});