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

export interface State {
    visible: boolean

}

export default class Toast 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}>
                        {children ? children : <View style={styles.contentContainer}>
                            <Text style={styles.dialogContentTextStyle}>{text}</Text>
                        </View>}
                        <View style={styles.btnContainer}>
                            <TouchableOpacity style={styles.dialogCancelButton} onPress={this.hide}>
                                <Text style={styles.hidemodalTxt}>取消</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.dialogConfirmButton} onPress={
                                this.confirm
                            }>
                                <Text style={styles.hidemodalTxt}>确定</Text>
                            </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: {
        borderRadius: 10,
        alignItems: 'center',
        backgroundColor: '#fff',
        width: 270,
        height: 120
    },
    contentContainer: {
        flex: 1,
        width: 270,
        height: 75,
        // flexDirection: 'row',
        position: "absolute",
        // paddingTop: px2dp(20),
        top: 0,
        borderTopColor: '#cccccc',
        justifyContent: 'center',
        alignItems: 'center'
    },
    dialogContentTextStyle: {
        fontSize: 16,
        flexWrap: "wrap",
        // height:px2dp()    
        color: '#333333',
        marginLeft: 25,
        marginRight: 25
    },
    btnContainer: {
        flex: 1,
        width: 270,
        height: 45,
        flexDirection: 'row',
        borderTopWidth: 1,
        position: "absolute",
        bottom: 0,
        borderTopColor: '#cccccc',
        alignItems: 'center'
    },
    dialogConfirmButton: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 44,
        borderLeftColor: '#cccccc',
        borderLeftWidth: 1
    },
    dialogCancelButton: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 44,
        borderRightColor: '#cccccc'
    },
    hidemodalTxt: {
        marginTop: 5,
        textAlign: 'center',
        fontSize: 16,
        marginBottom: 10,
        color: '#4fb7f1'
    },
});