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

interface Props {
    iconStyle?: object
    autoClose?: boolean
};

export default class LoadingToast extends Component<Props> {
    constructor(props: Props) {
        super(props);
        this.state = {
            text: ''
        };
        this.bgColor = new Animated.Value(0);
        this.active = false;
        this.delayHide = null;
    };

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

    show = () => {
        const { autoCloase } = this.props
        if (autoCloase) {
            setTimeout(() => {
                this.hide()
            }, 5000);
        }
        this.lottieRef && this.lottieRef.play();
        this.toast && this.toast.setNativeProps({
            style: {
                height: '100%',
                width: '100%',
                display: 'flex'
            }
        });
    }

    hide = () => {
        this.active = false;
        this.delayHide = setTimeout(() => {
            this.lottieRef && this.lottieRef.reset && this.lottieRef.reset();
            this.lottieRef && this.lottieRef.pause && this.lottieRef.pause();
            this.toast && this.toast.setNativeProps({
                style: {
                    height: 0,
                    width: 0,
                    display: 'none'
                }
            })
        }, 400);
    }

    render() {
        const { iconStyle } = this.props
        return (
            <View ref={(c) => this.toast = c} style={styles.toastContainer}>
                <LottieView
                    resizeMode={'contain'}
                    ref={(c) => this.lottieRef = c}
                    style={[{ width: px2dp(64), height: px2dp(64) }, iconStyle]}
                    source={require('../animated/loading-toast.json')}
                    autoPlay={false}
                />
                <View style={styles.toastBackGround}></View>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    toastContainer: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        display: "none",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        height: 0,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 999,
        overflow: 'hidden'
    },

    toastContent: {
        position: 'relative',
        width: px2dp(106),
        height: px2dp(106),
        borderRadius: px2dp(10),
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
    },

    toastInnerContent: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
        zIndex: 999
    },

    toastBackGround: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        // backgroundColor: '#fff',
        zIndex: 998
    },

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

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

    loadingText: {
        color: '#fff',
        fontSize: 13,
        marginTop: px2dp(10),
        maxWidth: px2dp(96),
        textAlign: 'center'
    },

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