import { Component, OnInit } from '@angular/core';

import { GuiColumn, GuiRowColoring } from '@generic-ui/ngx-grid';

import { Chart } from 'chart.js';

import { stocks } from './charts.source';
import { Stock } from './stock';


@Component({
	selector: 'gw-example-charts-grid',
	templateUrl: `./example-charts-grid.component.html`,
	styleUrls: ['./example-charts-grid.component.scss']
})
export class ExampleChartsGridComponent implements OnInit {

	chart: Chart;

	columns: Array<GuiColumn> = [{
		header: 'Stock',
		field: 'id'
	}, {
		header: 'Q1',
		field: (stocks) => stocks.earnings.q1,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q2',
		field: (stocks) => stocks.earnings.q2,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q3',
		field: (stocks) => stocks.earnings.q3,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q4',
		field: (stocks) => stocks.earnings.q4,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}];

	source = stocks;

	rowColoring: GuiRowColoring = GuiRowColoring.NONE;

	summaries: GuiSummaries = {
		enabled: true
	};

	ngOnInit() {
		this.chart = this.createChart();
	}

	createChart(): Chart {

		return new Chart('stocks-chart', {
			type: 'bar',
			data: {
				labels: ['Q1', 'Q2', 'Q3', 'Q4'],
				datasets: this.getData()
			},
			options: {
				title: {
					display: true,
					text: 'Companies quarterly earnings (fictional)'
				},
				layout: {
					padding: {
						top: 50
					}
				},
				responsive: true
			}
		});

	}

	getData(): Array<any> {
		return [{
			label: 'Apple',
			data: this.stockQuarterlyEarnings('Apple'),
			fill: false,
			borderColor: '#3e95cd',
			backgroundColor: '#3e95cd',
			borderWidth: 1
		}, {
			label: 'Amazon',
			data: this.stockQuarterlyEarnings('Amazon'),
			fill: false,
			borderColor: '#8e5ea2',
			backgroundColor: '#8e5ea2',
			borderWidth: 1
		}, {
			label: 'CD Projekt Red',
			data: this.stockQuarterlyEarnings('CD Projekt Red'),
			fill: false,
			borderColor: '#3cba9f',
			backgroundColor: '#3cba9f',
			borderWidth: 1
		}, {
			label: 'Microsoft',
			data: this.stockQuarterlyEarnings('Microsoft'),
			fill: false,
			borderColor: '#e8c3b9',
			backgroundColor: '#e8c3b9',
			borderWidth: 1
		}, {
			label: 'GoPro',
			data: this.stockQuarterlyEarnings('GoPro'),
			fill: false,
			borderColor: '#c45850',
			backgroundColor: '#c45850',
			borderWidth: 1
		}, {
			label: 'Tesla',
			data: this.stockQuarterlyEarnings('Tesla'),
			fill: false,
			borderColor: '#7d31e0',
			backgroundColor: '#7d31e0',
			borderWidth: 1
		}, {
			label: 'AMD',
			data: this.stockQuarterlyEarnings('AMD'),
			fill: false,
			borderColor: '#e03131',
			backgroundColor: '#e03131',
			borderWidth: 1
		}];
	}

	stockQuarterlyEarnings(stockId: string): Array<number> {
		let earnings = [];

		this.source.forEach((stock) => {
			if (stock.id === stockId) {
				earnings = stock.getEarnings();
			}
		});

		return earnings;
	}

	getInitialData(): void {
		this.chart.data.datasets = this.getData();
		this.chart.update();
	}

	stockSelected(stock: Stock): void {
		let selectedStock = stock[0];

		this.getInitialData();

		if (selectedStock === undefined) {
			return;
		} else {
			this.chart.data.datasets = this.chart.data.datasets.filter(dataset => dataset.label === selectedStock.id);
			this.chart.update();
		}
	};

	changeType(type: string): void {
		this.chart.config.type = type;
		this.chart.update();
	}
}