import { View, Text, ScrollView } from '@tarojs/components'
import './Modal.scss'
import React from 'react';
import { ModalType } from '@/utils/types';
import Box from './Box';
import Taro from '@tarojs/taro';

export default function Modal(props: {
    children: React.ReactNode,
    testInfo?: React.ReactNode,
    title?: string, dismiss: Function,
    confirm: Function,
    themeColor?: string,
    modalType?: ModalType,
    cancelCatchMove?: boolean
}) {

    //阻止中间内容点击事件穿透
    function click(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        Taro.vibrateShort({
            type: 'medium'
        })
    }

    function onClick() {
        // Taro.vibrateShort({
        //     type:'medium'
        // })
    }

    switch (props.modalType) {
        case ModalType.center:
            return <View className='modal modal_center_container' catchMove onClick={(e) => {
                if (process.env.TARO_ENV == 'weapp') {
                    e.stopPropagation()
                }; props.dismiss()
            }}>
                <View className='center_modal_detail'>
                    <Box><View onClick={click}>
                        {
                            props.children
                        }
                    </View>
                    </Box>
                </View>
            </View>
    }

    function longPress(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
    }


    return <View className='modal' catchMove onLongPress={longPress}>
        <View style={{ flex: 1, width: 375, flexShrink: 0 }} onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }; props.dismiss()
        }}>
            {
                props.testInfo ? props.testInfo : null
            }
        </View>
        <View className='modal_bottom_content' style={{ flexShrink: 0 }} onClick={onClick}>
            {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
            {
                props.children
            }
            {/* <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: color+alpha }} onClick={() => props.dismiss()}>
                    <Text className='modal_cancel_text' style={{color:color}}>取消</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: color }} onClick={() => props.confirm()}>
                    <Text className='modal_confirm_text' style={{color:'#000'}}>确定</Text>
                </View>


            </View> */}
        </View>

    </View>
}