import { ContentPart } from "@/types/ask";
import { Image, Modal, StyleSheet, TouchableOpacity, View } from "react-native";
import VideoPlayer from "./VideoPlayer";

interface SingleContentModelProps {
    modalVisible: { visible: boolean, data: ContentPart };
    setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
}
const SingleContentModel = ({ modalVisible, setModalVisible }: SingleContentModelProps) => {
    const isVideo = (data: ContentPart) => {
        return data.type === 'video';
    };

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible.visible}
            onRequestClose={() => {
                setModalVisible({ visible: false, data: {} as ContentPart });
            }}>
            <View style={styles.centeredView}>
                <TouchableOpacity
                    style={styles.background}
                    onPress={() => {
                        setModalVisible({ visible: false, data: {} as ContentPart })
                    }}
                />
                <TouchableOpacity style={styles.modalView} onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}>
                    {isVideo(modalVisible.data) ? (
                        // 视频播放器
                        <TouchableOpacity
                            activeOpacity={1}
                            style={{
                                flex: 1,
                                justifyContent: 'center',
                                alignItems: 'center',
                                maxHeight: "60%",
                            }}
                            onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
                        >
                            <VideoPlayer
                                videoUrl={modalVisible.data.url || ""}
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    alignSelf: 'center',
                                    justifyContent: 'center',
                                }}
                                onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
                            />
                        </TouchableOpacity>
                    ) : (
                        // 图片预览
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={() => setModalVisible({ visible: false, data: {} as ContentPart })}
                            style={styles.imageContainer}
                        >
                            <Image
                                source={{ uri: modalVisible.data.url }}
                                style={styles.fullWidthImage}
                                resizeMode="contain"
                            />
                        </TouchableOpacity>
                    )}
                </TouchableOpacity>
            </View>
        </Modal>
    )
}



const styles = StyleSheet.create({
    imageGridContainer: {
        flexDirection: 'row',
        flexWrap: 'nowrap',
        width: '100%',
        marginTop: 8,
    },
    video: {
        width: '100%',
        height: '100%',
    },
    imageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        maxHeight: '60%',
    },
    fullWidthImage: {
        width: '100%',
        height: "54%",
        marginBottom: 8,
    },
    gridImage: {
        aspectRatio: 1,
        marginBottom: 8,
    },
    background: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 添加半透明黑色背景
    },
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalView: {
        borderRadius: 20,
        alignItems: 'center',
        height: '100%',
        width: "100%",
        justifyContent: 'center',
        alignSelf: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    userAvatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
    },
    messageList: {
        padding: 16,
    },
    messageBubble: {
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontWeight: "600"
    },
    userBubble: {
        alignSelf: 'flex-end',
        backgroundColor: '#FFB645',
        marginLeft: '20%',
    },
    aiBubble: {
        alignSelf: 'flex-start',
        backgroundColor: '#fff',
        marginRight: '20%',
        borderWidth: 1,
        borderColor: '#e5e5ea',
    },
    userText: {
        color: '#4C320C',
        fontSize: 16,
    },
    aiText: {
        color: '#000',
        fontSize: 16,
    },
});

export default SingleContentModel