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: 'framadate-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,
                    },
                ],
            },
        };
    }
}