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

export interface PressSureModalRef {
    show: (type: number) => void;
    close: () => void;
}

interface Props {
    onPress: (type: number) => void;
}

export const PressSureModal = forwardRef<PressSureModalRef, Props>((props, ref) => {
    const [visible, setVisible] = useState(false);
    const [pressType, setPressType] = useState(1);

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

    const handleSubmit = () => {
        setVisible(false);
        props.onPress(pressType);
    }

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <View style={styles.contentContainer}>
                    <View style={styles.content}>
                        <ImageBackground source={{ uri: Images.welfare.welfareDialogBg }} style={styles.textBox} resizeMode="stretch">
                            <Text style={styles.text}>是否扭{pressType === 1 ? '一' : '五'}次?</Text>
                        </ImageBackground>

                        <View style={styles.btns}>
                            <TouchableOpacity onPress={() => setVisible(false)}>
                                <ImageBackground source={{ uri: Images.welfare.welfareDialogSubmit }} style={styles.btn} resizeMode="stretch">
                                    <Text style={styles.btnText}>取消</Text>
                                </ImageBackground>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={handleSubmit}>
                                <ImageBackground source={{ uri: Images.welfare.welfareDialogSubmit }} style={styles.btn} resizeMode="stretch">
                                    <Text style={styles.btnText}>确认</Text>
                                </ImageBackground>
                            </TouchableOpacity>
                        </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%',
        paddingHorizontal: 0,
        alignItems: 'center',
    },
    content: {
        width: '100%',
        paddingHorizontal: 16,
        paddingBottom: 30,
    },
    textBox: {
        width: '100%',
        height: 136, // 272rpx
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#000',
    },
    btns: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 11,
        marginTop: 20,
    },
    btn: {
        width: 150, // 300rpx
        height: 59, // 118rpx
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 10,
    },
    btnText: {
        fontSize: 14,
        color: '#fff',
        fontWeight: 'bold',
        textShadowColor: '#000',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    }
});