import React, { Component } from 'react'
import { ActivityIndicator, Alert } from 'react-native';
import { StyleSheet, View, Text, Image, Dimensions, Modal, Button } from 'react-native'
import { px2dp } from '../utils/base';
export interface Props {
    // text?: any
    autoClose?: any
}

export interface State {
    visble?: boolean
    msg?: any
}

const height = Number(Dimensions.get('window').height);
const width = Number(Dimensions.get('window').width);


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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        visble: false,
        msg: ""
    }


    show = (Msg?: any) => {
        let { autoClose, } = this.props
        let { visble, msg } = this.state
        msg = Msg
        visble = true
        this.setState({ visble, msg })
        if (autoClose) {
            setTimeout(() => {
                visble = false
                this.setState({
                    visble
                })
            }, 5000);
        }


    }

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


    render() {
        let { visble, msg } = this.state
        // let { text } = this.props
        return (
            // <View style={styles.main}>
            <Modal
                visible={visble}
                // animationType={"fade"}
                transparent={true}
                animationType="fade"
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    this.setState({ visble: false });
                }}
            >
                <View style={styles.main}>

                    <View style={styles.loagingStyleBox}>
                        {/* <Button onPress={this.loadingHide} title="点我" /> */}
                        <ActivityIndicator
                            size="small"
                            animating={true}
                            color={"#fff"}
                            style={styles.container}
                        />
                        <Text style={{ textAlign: "center", color: "#fff" }}>{msg ? msg + ' ...' : "loading ..."}</Text>
                    </View>
                </View>
            </Modal>
        );

    }
}
const styles = StyleSheet.create({

    main: {
        flex: 1,
        width: width,
        // backgroundColor: "#f0f0f0",
        backgroundColor: 'rgba(0, 0, 0, 0.1)'

    },
    loagingStyleBox: {
        position: "absolute",
        width: px2dp(120),
        height: px2dp(100),
        marginLeft: width / 2 - px2dp(60),
        marginTop: height / 2 - px2dp(120),
        justifyContent: "center",
        alignItems: "center",
        borderRadius: px2dp(10),
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
    },

    container: {
        // position: "absolute",
        width: px2dp(100),
        height: px2dp(60)
    }
})

// export class Loading extends LoadingToast {
//     public x = null
//     static show() {
//         // let x = new LoadingToast({});
//         // console.log(x.)

//         let x = new LoadingToast({})
//         x.render()
//         x.loadingShow()
//         // return x.loadingShow()
//         // x.loadingShow()
//         // LoadingToast.loadingShow()

//         // return true
//     }

//     static hide() {

//         let x = new LoadingToast({});
//         // console.log(x.)
//         // console.log("测试：",x.loadingShow())
//         x.loadingHide()

//     }
// }