/**
 * Created by zhoujian on 2019/4/9.
 */
import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, Modal, TouchableOpacity, TouchableWithoutFeedback, Animated } from 'react-native'
import { colors, height, onePx, px2dp, width } from '../utils/base';
export interface Props {
    // msg?: any
    // title?: any
}

export interface State {
    visible: boolean
    msg?: any
    title?: any
    scale?: Animated.Value
}

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,
        msg: "",
        title: "",
        scale: new Animated.Value(0)
    }

    show = (Msg: any, title?: string) => {

        this.setState({
            visible: true,
            msg: Msg,
            title: title
        })
        Animated.spring(this.state.scale, {
            toValue: 1,
            velocity: 2,//初始速度
            friction: 5,//摩擦力值
            tension: 2,//弹跳的速度值
            useNativeDriver: true
        }).start();
    }

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

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




    render() {
        let { visible } = this.state
        let { msg, title } = this.state
        return (
            <Modal style={styles.container}
                transparent={true}
                visible={visible}
                onRequestClose={this.hide}>
                <TouchableOpacity style={styles.dialogContainer} onPress={this.hide}>
                    <Animated.View style={[styles.innerContainer, {
                        transform: [
                            {
                                scale: this.state.scale
                            }
                        ]
                    }]}>
                        <View style={styles.toastContent}>
                            <View style={styles.toastHeader}>
                                <Text style={{ fontSize: 15, color: '#333', fontWeight: '700' }}>{title ? title + '' : '提示'}</Text>
                            </View>
                            <View style={styles.toastBody}>
                                <Text numberOfLines={6} style={styles.title}>{msg ? msg + '' : '未知信息'}</Text>
                            </View>
                            <TouchableWithoutFeedback onPress={this.hide} style={styles.toastFooter}>
                                <Text style={styles.toastFooterText}>我知道了</Text>
                            </TouchableWithoutFeedback>
                        </View>
                    </Animated.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)',
        // position: "absolute"
    },

    innerContainer: {
        position: "absolute",
        top: height / 2 - px2dp(120),
        borderRadius: px2dp(10),
        alignItems: 'center',
        justifyContent: "center",
        backgroundColor: '#fff',
        width: px2dp(270),
        height: px2dp(130)
    },
    toastContent: {
        width: px2dp(270),
        borderRadius: px2dp(8),
        alignItems: 'center',
        overflow: 'hidden',
    },

    toastHeader: {
        width: '100%',
        height: px2dp(40),
        justifyContent: 'center',
        alignItems: 'center',
    },

    toastBody: {
        width: '100%',
        height: px2dp(50),
        justifyContent: "center",
        alignItems: 'center',
        paddingHorizontal: px2dp(24),
    },

    title: {
        fontSize: 16,
        color: '#a1a1a1',
        fontWeight: '600',
        lineHeight: 25,
        textAlign: 'center',
        letterSpacing: 0.8
    },

    toastFooter: {

        // width: '100%',
        height: px2dp(40),
        // // borderTopColor: '#eee',
        // // backgroundColor: 'blue',
        // borderTopWidth: onePx,
        // justifyContent: 'center',
        // alignItems: 'center'
    },

    toastFooterText: {
        height: px2dp(40),
        width: width,
        textAlign: 'center',
        fontSize: 16,
        color: colors.themeColor,
        fontWeight: '700',
        lineHeight: px2dp(40),
        borderTopColor: '#eee',
        borderTopWidth: onePx,
    },
});