import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { CurrencyService } from '@core/services/currency.service';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { ChartService } from '@yourcause/common';
import { Chart, ChartOptions, ChartType, TooltipItem } from 'chart.js';
import { shortNumberFilter } from '../../services/aggregation.service';
import { CsrConnectStats, DonationByYear } from '../../typings/organization.typing';

@Component({
  selector: 'gc-csr-connect-charts',
  templateUrl: './csr-connect-charts.component.html',
  styleUrls: ['./csr-connect-charts.component.scss']
})
export class CsrConnectChartsComponent implements OnInit {
  @Input() csrStats: CsrConnectStats;
  @Input() sideBySide = false;

  companyDonations: DonationByYear[];
  networkDonations: DonationByYear[];
  totalCompanyDonations = 0;
  totalNetworkDonations = 0;
  companyByYearLabel: string[] = [];
  companyByYearData: number[] = [];
  networkByYearLabel: string[] = [];
  networkByYearData: number[] = [];
  chartDefaults: any;
  companyColorSet: string[];
  showBreakdownCompany = false;
  showBreakdownNetwork = false;

  @ViewChild('companyChart', { static: true }) companyChart: ElementRef;
  @ViewChild('networkChart', { static: true }) networkChart: ElementRef;

  constructor (
    private clientSettingsService: ClientSettingsService,
    private chartService: ChartService,
    private currencyService: CurrencyService
  ) { }

  get chartOptions (): ChartOptions {
    return  {
      scales: {
        yAxes: {
          beginAtZero: true,
          ticks: {
            callback: (value: string|number) => {
              return '$' + shortNumberFilter(+value, 1);
            }
          }
        }
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: (tooltipItem: TooltipItem<ChartType>) => {
              const data = tooltipItem.chart.data;

              const label = data.labels[tooltipItem.dataIndex];
              const amount = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex] as number);
              const value = this.currencyService.formatMoney(amount);

              return label + ': ' + value;
            }
          }
        }
      }
    };
  }

  ngOnInit () {
    this.companyDonations = this.csrStats.clientCharityDonationsByYear;
    this.networkDonations = this.csrStats.networkCharityDonationsByYear;
    this.companyDonations.forEach((donation) => {
      this.companyByYearLabel.push('' + donation.donationYear);

      const totalDonations = donation.totalProcessedEmployeesDonations +
        donation.totalCompanyMatches;
      this.totalCompanyDonations += totalDonations;

      this.companyByYearData.push(totalDonations);
    });

    this.networkDonations.forEach((donation) => {
      this.networkByYearLabel.push('' + donation.donationYear);

      const totalDonations = donation.totalProcessedEmployeesDonations +
        donation.totalCompanyMatches;
      this.totalNetworkDonations += totalDonations;

      this.networkByYearData.push(totalDonations);
    });
    this.setBrandingColors();
    this.setCompanyChart();
    this.setNetworkChart();
  }

  setBrandingColors () {
    const branding = this.clientSettingsService.clientBranding;
    this.companyColorSet = [
      this.chartService.convertHex(
        this.chartService.shadeColor(branding.brandPrimary, -0.2),
        70
      ),
      this.chartService.convertHex(
        branding.brandSecondary,
        70
      ),
      this.chartService.convertHex(
        branding.brandPrimary,
        70
      ),
      this.chartService.convertHex(
        this.chartService.shadeColor(branding.brandSecondary, 0.1),
        70
      )
    ];
  }

  setCompanyChart () {
    const context = this.companyChart.nativeElement.getContext('2d');
    new Chart(context, {
      type: 'bar',
      data: {
        labels: this.companyByYearLabel,
        datasets: [{
          label: '',
          data: this.companyByYearData,
          backgroundColor: this.companyColorSet,
          hoverBackgroundColor: this.companyColorSet,
          borderWidth: 1
        }]
      },
      options: this.chartOptions
    });
  }

  setNetworkChart () {
    const context = this.networkChart.nativeElement.getContext('2d');
    new Chart(context, {
      type: 'bar',
      data: {
        labels: this.networkByYearLabel,
        datasets: [{
          label: '',
          data: this.networkByYearData,
          backgroundColor: this.companyColorSet,
          hoverBackgroundColor: this.companyColorSet.map((_color) => {
            return this.chartService.shadeColor(_color, .5);
          }),
          borderWidth: 1
        }]
      },
      options: this.chartOptions
    });
  }


  toggleCompanyView () {
    this.showBreakdownCompany = !this.showBreakdownCompany;
  }

  toggleNetworkView () {
    this.showBreakdownNetwork = !this.showBreakdownNetwork;
  }

}