import {Text, View, Dimensions,TouchableOpacity} from 'react-native';
import LottieView from 'lottie-react-native';
import React from 'react';
import PropTypes from 'prop-types';

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


class ViewError extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            animation: this.props.animations,
            title: props.defaultTitle,
            subtitle: props.defaultSubtitle,
            initialSetup: true,
            errorCode: null
        };
    }



    getAnimation(animations) {
        if (animations.length == null) {
            return animations;
        } else if (animations.length === 1){
            return animations[0];
        }

        let randomNumber = Math.floor(Math.random() * animations.length) + 1;
        randomNumber -= 1;
        return animations[randomNumber];
    }

    loadingNumber() {
        return (
            <LottieView
                style={{width: SCREEN_WIDTH * 0.5, height: SCREEN_HEIGHT * 0.37}}
                source={this.state.animation} resizeMode='cover' speed={1}
                autoPlay loop/>
        );
    }



    setupError(){
        if(this.props.errorCode == null) {
            this.setupDefaultError();
        } else {
            let error = this.props.errors[this.props.errorCode];
            if( (error != null) && (error !==-1)){

                this.setState({title: error.title, subtitle: error.subtitle});
            } else {
                this.setupDefaultError();
            }
        }


    }

    setupDefaultError(){
        this.setState({title: this.props.defaultTitle, subtitle: this.props.defaultSubtitle});
    }

    componentDidMount() {
        this.setState({animation: this.getAnimation(this.props.animations)});


    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if(prevProps.errorCode != this.props.errorCode){
            console.log("Setup Error ....");
            this.setupError();

        }


    }


    render() {
        if (!this.props.hasError) {
            return (
                <View  style={{flex: 1}} {...this.props}>
                    {this.props.children}
                </View>
            );
        } else {
            return (

                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#E8E8E8'}}>
                    <View style={{flex: 0.7, marginTop: '30%',justifyContent: 'center', alignItems: 'center'}}>
                        {this.loadingNumber(this.props.animation)}
                        <View style={{alignItems: 'center', justifyContent: 'center', marginHorizontal: 45}}>
                            <Text style={{textAlign: 'center', fontSize: 18, fontWeight: 'bold'}}>{this.state.title}</Text>
                            <Text style={{textAlign: 'center'}}>{this.state.subtitle}</Text>
                        </View>
                    </View>
                    <View style={{flex: 0.3, justifyContent: 'flex-start'}}>
                        <TouchableOpacity onPress={() => this.props.tryAgain()} style={{borderColor: this.props.buttonColor, borderWidth: 0.6, borderRadius: 10, padding: 15}}>
                            <Text style={{fontSize: 17, color: this.props.buttonColor}}>Tentar Novamente</Text>
                        </TouchableOpacity>
                    </View>


                </View>
            );
        }
    }

};

ViewError.propTypes = {
    animations: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    hasError: PropTypes.bool.isRequired,
    errorCode: PropTypes.number,
    defaultTitle: PropTypes.string,
    defaultSubtitle: PropTypes.string,
    buttonColor: PropTypes.string,
    tryAgain: PropTypes.func.isRequired
};


ViewError.defaultProps = {
    hasExtraLoadingInfo: false,
    defaultTitle: 'Falha ao obter os dados, tente novamente em alguns instantes.',
    defaultSubtitle: 'Código do Erro: 500',
    buttonColor: 'red',
    errorCode: -1
};

export default ViewError;
