import React from 'react';
import API_URL from './config.js';
import GetTokenCookie from './components/GetTokenCookie.js';
import Chart from './components/Chart';

class Profile extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: {},
            profile: {},
            isLoading: true,
            error: {
                visible: false,
                message: ""
            }
        }
    }

    componentDidMount() {
        const url = API_URL + "/api/customers";
        fetch(url, {
            headers: {
                'Authorization': 'Bearer ' + GetTokenCookie("uid")
            }
        })
            .then(res => res.json())
            .then(res => {
                this.setState({ profile: res });
                this.setState({ isLoading: false });
                this.setChartData();
            })
            .catch(error => this.setState({ error, isLoading: false }));
    }

    setChartData() {
        this.setState({
            chartData: {
                labels: ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
                datasets: [
                    {
                        label: 'Population',
                        data: [
                            617594,
                            181045,
                            153060,
                            106519,
                            105162,
                            95072
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(255, 206, 86, 0.6)',
                            'rgba(75, 192, 192, 0.6)',
                            'rgba(153, 102, 255, 0.6)',
                            'rgba(255, 159, 64, 0.6)',
                            'rgba(255, 99, 132, 0.6)'
                        ]
                    }
                ]
            }
        });
    }

    render() {
        if (this.state.isLoading) {
            return (
                <div className="loader">
                    <img src="/loading.gif" />
                    <h2>Loading...</h2>
                </div>
            );
        }

        return (
            <div>
                <h4>Cześć {this.state.profile.firstName}!</h4>
                <p class="lead">{this.state.profile.description}</p>
                <Chart chartData={this.state.chartData} location="Massachusetts" legendPosition="bottom" />
            </div>
        );
    }
}

export default Profile;