import { Component, Inject, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { DOCUMENT } from '@angular/common';
import { mockGraphConfig } from '../../../mocks/mock-graph';
import { ConfigService } from '../../../services/config.service';
import { mockPoll3 } from '../../../mocks/mock-poll3';

@Component({
	selector: 'app-poll-graphic',
	templateUrl: './poll-graphic.component.html',
	styleUrls: ['./poll-graphic.component.scss'],
})
export class PollGraphicComponent implements OnInit {
	isColorblind = false;
	pollConfigRetrieved: any = mockPoll3;
	graphicConfig: any = mockGraphConfig;
	preferred: any = 'rien';
	yesList: number[] = [];
	maybeList: number[] = [];
	noList: number[] = [];
	nbPoll = 0;
	dateList: string[] = [];

	constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {}

	ngOnInit(): void {
		this.formatDataAnswers(this.graphicConfig);
		this.isColorblind = false;
		this.pollConfigRetrieved = new Chart(this.document.getElementById('graph'), {
			type: 'horizontalBar',
			data: {
				labels: this.pollConfigRetrieved.choices.map((choice) => choice.name),
				datasets: [
					{
						type: 'horizontalBar',
						stack: 'Yes',
						backgroundColor: '#429a00',
						data: this.yesList,
					},
					{
						type: 'horizontalBar',
						stack: 'Yes',
						backgroundColor: '#f5a623',
						data: this.maybeList,
					},
					{
						type: 'horizontalBar',
						stack: 'No',
						backgroundColor: '#cd0000',
						data: this.noList,
					},
				],
			},
			options: this.getSettedGraphOptions(),
		});
	}

	public toggleColorblind(): void {
		this.isColorblind = !this.isColorblind;
	}

	public formatDataAnswers(poll): void {
		// if (poll && poll.pollType === "date") {
		this.initPollCounter();
		poll.answers.forEach((response) => {
			switch (response.text) {
				case 'yes':
					this.yesList[this.nbPoll - 1]++;
					break;
				case 'maybe':
					this.maybeList[this.nbPoll - 1]++;
					break;
				case 'no':
					this.noList[this.nbPoll - 1]++;
					break;
			}
		});
		// }
	}

	public initPollCounter(): void {
		this.nbPoll++;
		this.dateList[this.nbPoll - 1] = 'jeudi';
		this.maybeList[this.nbPoll - 1] = 0;
		this.yesList[this.nbPoll - 1] = 0;
		this.noList[this.nbPoll - 1] = 0;
	}
	private getSettedGraphOptions(): any {
		// TODO: create interfaces, or find another way to work. "any" return type should be removed.
		return {
			legend: { display: false },
			scales: {
				xAxes: [
					{
						gridLines: { drawBorder: false, display: false },
						display: false,
						stacked: true,
						ticks: { beginAtZero: true, maxRotation: 0, minRotation: 0 },
					},
				],
				yAxes: [
					{
						gridLines: { drawBorder: true, display: false },
						display: true,
						stacked: true,
					},
				],
			},
		};
	}
}