import React from 'react'
import {StyleSheet, View, Image, Text} from 'react-native'
import PYAlert from '../alert/PYAlert'

type PropsType = {}

type StateType = {
    tips: string
    isSuccess: boolean
}

export default class PYResultTips extends React.Component<PropsType, StateType> {
    timer: NodeJS.Timeout | null = null
    state: StateType
    alertRef: PYAlert | null = null
    constructor(props: any) {
        super(props)
        this.state = {
            tips: '',
            isSuccess: false,
        }
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer)
        this.setState = () => {}
    }

    render() {
        return (
            <PYAlert
                ref={e => (this.alertRef = e)}
                customView={this._renderCustomView()}
                closeOnTouchOutside={true}
                closeOnHardwareBackPress={true}
            />
        )
    }

    _renderCustomView = () => {
        let pic = null
        if (this.state.isSuccess) {
            pic = require('../img/success.png')
        } else {
            pic = require('../img/warning.png')
        }
        return (
            <View style={[styles.container]}>
                <Image style={styles.img} source={pic} />
                <Text style={styles.text}>{this.state.tips}</Text>
            </View>
        )
    }

    show = (tips: string, isSuccess: boolean) => {
        const that = this
        this.setState(
            {
                tips: tips,
                isSuccess: isSuccess,
            },
            () => {
                that.alertRef?.show()
                that.timer && clearTimeout(that.timer)
                that.timer = setTimeout(() => {
                    that.alertRef?.hide()
                }, 2000)
            },
        )
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        minWidth: 136,
        minHeight: 112,
        borderRadius: 5,
        backgroundColor: 'white',
        padding: 10,
    },
    img: {
        width: 40,
        height: 40,
    },
    text: {
        marginTop: 13,
        fontFamily: 'PingFangSC-Regular',
        fontSize: 16,
        color: '#545b61',
        textAlign: 'center',
    },
})