import React, { Component } from 'react';
import { isMobile } from 'react-device-detect'

import Lottie from 'react-lottie';
import axios from 'axios'

import * as constants from './constants'
import { defaultConfig, defaultStyles } from './config';

class Response extends Component {
    
    constructor(props) {
        super(props)

        this.state = {
            config: this.props.config,
        }
    }
    
    componentWillMount() {
        axios.get(this.state.config.resources.animations.status_good)
        .then(response => {
            this.setState({
                animationData: response.data
            })
        })
        .catch((error) => {
            console.log(error)
        })
    }
    
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.config != this.props.config) {
            this.setState({
                config: this.props.config
            })
        }
    }

    render() {
        const defaultOptions = {
          loop: false,
          autoplay: true,
          animationData: this.state.animationData,
          rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice'
          }
        }
        const eventListeners = [{
            eventName: 'complete',
            callback: () => { },
        }]
        
        return (
          <div>
            <center>
            <div style={{ marginTop: 75 }} >
            <h1 style={defaultStyles.title}>Document Uploaded</h1>
            </div>
            <Lottie
              options={defaultOptions}
              width={isMobile? 150 : 250 }
              eventListeners={eventListeners}
            />
            <br />
            <p style={{ fontSize: 14, color: '#05294B' }} > Response received in {this.props.responseTime} seconds </p>
            <br />
            <br />
            </center>
          </div>
        );
      }
}

export default Response;