import React, {Component} from 'react';

import axios from 'axios';

import CryptoList from './CryptoList';

class Crypto extends Component {

    constructor() {
        super();

        this.state = {
            cryptoList: []
        }
    }

    getData = () => {
        axios.get(`https://blockchain.info/pl/ticker`)
        .then(response => {


            let lastCryptoList = this.state.cryptoList;
            console.log(lastCryptoList);

            let currencyArray = Object.keys(response.data).map(function(key, index) {
                let currencyObj = {}

                currencyObj.currency = key;
                currencyObj.lastRate = response.data[key].last;
                currencyObj.symbol = response.data[key].symbol;

                let lastObject = lastCryptoList[index];

                if(lastObject !== undefined) {

                    if(lastObject.lastRate > currencyObj.lastRate) {
                        currencyObj.class = 'red';
                    } else if (lastObject.lastRate < currencyObj.lastRate) {
                        currencyObj.class = 'green';
                    } else {
                        currencyObj.class = 'blue';
                    }

                } else {
                    currencyObj.class = 'blue';
                }

                return currencyObj;
            });

            this.setState({cryptoList: currencyArray})
        });
    }

    componentDidMount() {
       this.getData();
       this.interval = setInterval(this.getData, 5000);
    }

    render() {
        return (
            <div className="crypto">
                To jest mój komponent Crypto.js
                <CryptoList />
            </div>
        )
    }
}

export default Crypto;