import { Component, OnInit } from "@angular/core";
import { groupBy, values, maxBy } from "lodash";
import { TopicsService } from "../../services/topics.service";
import { Article, Keyword, RootObject, Topic } from "../../models/TopicModel";
import {
    ChartDataSets,
    ChartOptions,
    ChartType,
    RadialChartOptions
} from "chart.js";
import { Label } from "ng2-charts";
import { plainToClass } from "class-transformer";
import { ActivatedRoute, Params } from "@angular/router";

@Component({
    selector: "app-show",
    templateUrl: "./show.component.html",
    styleUrls: ["./show.component.scss"]
})
export class ShowComponent implements OnInit {
    displayedColumns: string[] = ["date", "grouping"];
    radarChartOptions: RadialChartOptions = { responsive: true };
    radarChartLabels: Label[] = [];
    radarChartData: ChartDataSets[] = [];
    radarChartDataValues: number[] = [];
    radarChartType: ChartType = "radar";

    barChartOptions: ChartOptions = { responsive: true };
    barChartType: ChartType = "bar";
    barChartLegend = true;
    barChartPlugins = [];

    scatterChartOptions: ChartOptions = {
        responsive: true,
        legend: { display: false }
    };
    scatterChartType: ChartType = "scatter";
    scatterChartDataDates: number[] = [];
    scatterChartData: ChartDataSets[] = [{ radius: 3, pointStyle: "cross" }];
    scatterChartLabels: string[] = [];

    showClicked = 0;
    topic: Topic;
    keyword: Keyword;
    article: Article;

    rootObject;
    topics;
    topicsObject;
    status = "Show data (it takes a second...)";
    topicId;
    dateCounter: number[];
    constructor(
        private topicsService: TopicsService,
        private activatedRoute: ActivatedRoute
    ) {}
    ngOnInit() {
        this.topicId = this.activatedRoute.snapshot.paramMap.get("id");
    }

    getTopics() {
        this.status = "Processing...";
        this.topicsService.getTopics(this.topicId).subscribe(response => {
            this.topicsObject = response;
            this.rootObject = plainToClass(RootObject, this.topicsObject);
            this.topics = this.rootObject.topics;
            this.status = "Complete!";
            console.log(this.topics);
        });
    }
    logTopics() {
        this.getTopics();
    }

    printTopics(id: number) {
        this.radarChartLabels = [];
        this.radarChartData = [];
        this.radarChartDataValues = [];
        this.scatterChartData = [];
        this.scatterChartLabels = [];
        this.topic = this.topics.find(x => x.id === id);
        for (this.keyword of this.topic.keywords) {
            this.radarChartLabels.push(this.keyword.word);
            this.radarChartDataValues.push(this.keyword.score);
        }

        const years = [
            ...new Set(
                this.topic.articles.map(a => new Date(a.date).getFullYear())
            )
        ];

        for (const year of years) {
            const articles = this.topic.articles.filter(
                a => new Date(a.date).getFullYear() == year
            );
            const articlesByTitle = groupBy(articles, "title");

            const mostPopularArticleTitle = maxBy(
                values(articlesByTitle),
                x => x.length
            )[0].title;

            this.scatterChartLabels.push(mostPopularArticleTitle); // Bug: https://github.com/valor-software/ng2-charts/issues/1126
            this.scatterChartData.push({
                data: [
                    {
                        x: year,
                        y: articlesByTitle[mostPopularArticleTitle].length
                    }
                ],
                label: mostPopularArticleTitle
            });
        }

        this.radarChartData.push({
            data: this.radarChartDataValues,
            label: "Keywords"
        });

        this.showClicked = 1;
    }
}