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

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

export const WishRuleModal = forwardRef<WishRuleModalRef, {}>((props, ref) => {
    const [visible, setVisible] = useState(false);

    useImperativeHandle(ref, () => ({
        show: () => 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}>
                    <ImageBackground style={styles.content} source={{ uri: Images.welfare.welfareDialogBg }} resizeMode="contain">
                        <View style={styles.titleBox}>
                            <Image style={styles.title} source={{ uri: Images.welfare.qijiWelfareDollRule }} resizeMode="contain" />
                        </View>
                        <View style={styles.closeBox}>
                            <TouchableOpacity onPress={() => setVisible(false)}>
                                <Image style={styles.close} source={{ uri: Images.common.closeBut }} />
                            </TouchableOpacity>
                        </View>
                        <Image source={{ uri: Images.welfare.catchDollRule }} style={styles.ruleImage} contentFit="contain" />
                    </ImageBackground>
                </View>
            </View>
        </Modal>
    );
});

export default WishRuleModal;

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.7)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentContainer: {
        width: 300,
        height: 400,
        alignItems: 'center',
        justifyContent: 'center',
    },
    content: {
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleBox: {
        position: 'absolute',
        top: -20,
        zIndex: 1,
    },
    title: {
        width: 200,
        height: 50,
    },
    closeBox: {
        position: 'absolute',
        top: 0,
        right: -10,
        zIndex: 2,
    },
    close: {
        width: 30,
        height: 30,
    },
    ruleImage: {
        width: 260,
        height: 300,
        marginTop: 20,
    },
});