import React from 'react';
import { Doughnut, Line } from 'react-chartjs-2';
import moment from 'moment';
import cookie from 'react-cookies';

class Chart extends React.Component {
	constructor(props) {
		super(props);
		this.calculateData = this.calculateData.bind(this);
		this.state = {
			chartData: {}
		};
	}
	static defaultProps = {
		displayTitle: false,
		displayLegend: true,
		legendPosition: 'right'
	};

	componentDidMount() {
		this.calculateData();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.chartRate != nextProps.chartRate) {
			this.calculateData();
		}
	}

	years = currentYear => {
		let year = [];
		for (let i = 0; i <= time; i++) {
			year.push(currentYear + i + '');
		}
		return year;
	};

	gains = (amount, monthly, rate) => {
		let gain = [];
		for (let i = 0; i <= time; i++) {
			gain.push(
				amount * (1 + rate) ** (365 * i) + monthly / 365 * (1 + rate) * ((1 + rate) ** (365 * i) - 1) / rate
			);
		}
		//console.log(gain);
		return gain;
	};

	calculateData() {

		let time = parseInt(cookie.load('time'));
		let initialInvestment = parseInt(cookie.load('lump'));
		let monthlyInvestment = parseInt(cookie.load('monthly'));

		const yAxis = this.gains(initialInvestment, monthlyInvestment, this.props.rate);

		setLabel = this.years(
			moment()
				.utc()
				.year()
		);

		this.setState({
			chartData: {
				labels: this.props.label,
				datasets: [
					{
						label: '',
						data: yAxis,
						backgroundColor: ['rgba(38, 114, 114, 0.8)', 'rgba(255, 99, 132, 0.6)'],
						borderWidth: 0
					}
				]
			}
		});
	}

	render() {
		return (
			<div className="chart">
				<div className="chart__line">
					<Line
						data={this.state.chartData}
						redraw={true}
						options={{
							title: {
								display: this.props.displayTitle,
								text: '' + this.props.label,
								fontSize: 25
							},
							legend: {
								display: this.props.displayLegend,
								position: this.props.legendPosition
							},
							maintainAspectRatio: false
						}}
					/>
				</div>
				<div>
					<p className="btn btn--large">Create Account</p>
				</div>
			</div>
		);
	}
}

export default Chart;