//@ts-nocheck
import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity, ScrollView, Animated, Easing } from 'react-native'
import { px2dp, onePx, colors } from '../../utils/base';

export default class MyConfirm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            opacity: new Animated.Value(0),
            data: {
                title: '',
                confirmText: "确认",
                confimFun: null
            }
        };
        this.active = false;
        this.show = this.show.bind(this)
    }

    componentWillUnmount() {
        this.delayHide && clearTimeout(this.delayHide)
    }

    show = (data) => {
        this.setState({ data })
        this.toast.setNativeProps({
            style: {
                zIndex: 999
            }
        })
        Animated.timing(
            this.state.opacity,
            {
                toValue: 0.32,
                duration: 250,
                easing: Easing.in(),
                useNativeDriver: true
            }
        ).start();
    }

    hide = () => {
        this.active = false;
        Animated.timing(
            this.state.opacity,
            {
                toValue: 0,
                duration: 100,
                easing: Easing.in(),
                useNativeDriver: true
            }
        ).start();
        this.delayHide = setTimeout(() => {
            this.toast.setNativeProps({
                style: {
                    zIndex: -1
                }
            })
        }, 100);
    };

    handleClose() {
        const { data } = this.state;
        this.hide();
        data.confirmFun && data.confirmFun()
    }

    render() {
        const { data } = this.state;
        return (
            <View ref={(c) => this.toast = c} style={styles.alertContainer}>
                <Animated.View style={[styles.alertOverlay, { opacity: this.state.opacity }]}>
                </Animated.View>
                <View style={styles.alertContent}>
                    <View style={styles.alertBody}>
                        <Text numberOfLines={3} style={styles.title}>{data.title ? data.title : '确认消息'}</Text>
                    </View>
                    <View style={styles.alertFooter}>
                        <TouchableHighlight style={[styles.btn, styles.border]} underlayColor={'#f2f2f2'} onPress={() => this.hide()} >
                            <Text style={{ fontSize: 16, color: '#000', fontWeight: '700' }}>取消</Text>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.btn} underlayColor={'#f2f2f2'} onPress={() => this.handleClose()} >
                            <Text style={{ fontSize: 16, color: colors.red, fontWeight: '700' }}>{data.confirmText}</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>

        )
    }
}


const styles = StyleSheet.create({
    alertContainer: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
        zIndex: -1
    },

    alertOverlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#000'
    },

    alertContent: {
        width: px2dp(300),
        // height: px2dp(182),
        backgroundColor: '#fff',
        borderRadius: px2dp(8),
        justifyContent: 'space-between',
        alignItems: 'center',
    },

    alertHeader: {
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor: '#999',
        paddingTop: px2dp(18)
    },

    alertBody: {
        width: '100%',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingHorizontal: px2dp(24),
        paddingTop: px2dp(26),
        paddingBottom: px2dp(26)
        // backgroundColor: "red"
    },

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

    alertFooter: {
        width: '100%',
        height: px2dp(52),
        borderTopColor: '#eee',
        borderTopWidth: onePx,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },

    btn: {
        width: '50%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },

    border: {
        borderRightColor: '#eee',
        borderRightWidth: onePx
    }
})