import {Component, Inject, OnInit} from "@angular/core";
import {Chart} from "chart.js";
import {DOCUMENT} from '@angular/common';
import {mockGraphConfig} from "../config/mock-graph";

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

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

    ngOnInit() {
        var toto = mockGraphConfig;

        this.formatDataAnswers(toto);

        this.isColorblind = false;
        this.pollData = new Chart(this.document.getElementById("graph"), {
            type: "horizontalBar",
            data: {
                labels: ["jeudi"],
                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: {
                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
                        }
                    ]
                }
            }
        });
    }

    toggleColorblind() {
        this.isColorblind = !this.isColorblind;
    }

    formatDataAnswers(poll) {
        if (poll && poll.pollType === "special dates") {
            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;
                }
            });
        }
    }

    initPollCounter() {
        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;
    }
}