/**
 * Created by zhoujian on 2019/4/9.
 */
import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, Modal, TouchableOpacity } from 'react-native'
import { height, px2dp } from '../utils/base';
export interface Props {
    text?: any
    // confirm: Function
    children?: any

}

export interface State {
    visible: boolean

}

export default class ToastModalBase extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        visible: false,

    }

    show = () => {
        this.setState({
            visible: true
        })
    }

    hide = () => {
        this.setState({
            visible: false
        })
    }

    confirm = () => {
        // let { confirm } = this.props
        // confirm && confirm
        confirm && this.hide()
        // this.setState({ visible: false })
    }


    render() {
        let { visible } = this.state
        let { text, children } = this.props
        return (
            <Modal style={styles.container}
                transparent={true}
                visible={visible}
                onRequestClose={this.hide}>
                {/* <TouchableOpacity style={{ flex: 1 }} onPress={() => this.hide}> */}
                <View style={styles.dialogContainer} >
                    <View style={styles.innerContainer}>
                        <View style={styles.conatinerTop}>
                            {
                                children && children
                            }
                        </View>
                        <View style={styles.containerBottom}>

                            <TouchableOpacity onPress={this.hide} style={styles.containerBottomTouchBox}>
                                <Image source={require("../assets/close-icon.png")} style={styles.closeBtn} />
                            </TouchableOpacity>
                        </View>

                    </View>

                </View>
                {/* </TouchableOpacity> */}
            </Modal>
        );

    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialogContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.6)'
    },

    innerContainer: {
        position: "absolute",
        width: px2dp(270),
        height: height / 2 + px2dp(20),
        top: height / 2 - px2dp(200),
        paddingTop: px2dp(20),
        alignItems: 'center',
        borderRadius: px2dp(10),
        // backgroundColor: '#fff',
        // backgroundColor: "blue"
    },
    conatinerTop: {
        width: px2dp(270),
        height: height / 2 - px2dp(80),
        paddingHorizontal: px2dp(12),
        paddingVertical: px2dp(10),
        borderRadius: px2dp(10),
        backgroundColor: '#fff',
    },
    containerBottom: {
        height: px2dp(80),
        width: px2dp(270),
        justifyContent: "flex-end",
        alignItems: "center",
        // backgroundColor: "red"
    },

    containerBottomTouchBox: {
        height: px2dp(45),
        width: px2dp(60),
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "green"
    },

    closeBtn: {
        width: px2dp(28),
        height: px2dp(28),
        // backgroundColor: "red"
    }
});