import React, { Component } from 'react'

import Lottie from 'react-lottie'
import { isMobile } from 'react-device-detect'
import axios from 'axios'

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

class Upload extends Component {

    constructor(props) {
        super(props)

        this.state = {
            config: this.props.config,
            animationData: {}
        }
    }
    
    componentWillMount() {
        axios.get(this.state.config.resources.animations.loading)
        .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: true,
          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}>Processing ...</h1>
            </div>
            <Lottie
                options={defaultOptions}
                width={ isMobile? (window.innerWidth / 1.5) : (window.innerWidth / 3) }
                eventListeners={eventListeners} />
            </center>
            <br />
            <br />
            </div>
        );
      }
}

export default Upload;