import { Component, Input, OnChanges } from '@angular/core';
import { CurrencyService } from '@core/services/currency.service';
import { ProgramStatusStat } from '@core/typings/program.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { ProgramService } from '@features/programs/program.service';
import { AutoTableRepository, AutoTableRepositoryFactory, ChartService, DashboardTableData, ValueComparisonService } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { NotifierService } from '@yourcause/common/notifier';
import { ChartData, ChartOptions, ChartType, TooltipItem } from 'chart.js';

@Component({
  selector: 'gc-program-status-block',
  templateUrl: './program-status-block.component.html',
  styleUrls: ['./program-status-block.component.scss']
})
export class ProgramStatusBlockComponent implements OnChanges {
  @Input() programCycleIds: number[];
  @Input() grantProgramId: number;
  baseChart: ChartOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  };
  branding = this.clientSettingsService.get('clientBranding');
  colors = [
    this.branding.brandPrimary,
    this.branding.brandSecondary,
    this.branding.brandUtility
  ];
  defaultCurrency = this.clientSettingsService.defaultCurrency;
  totalApps: number;
  stats: ProgramStatusStat[] = [];
  statusRepo: AutoTableRepository<ProgramStatusStat>;
  statusLabels: string[] = [];
  statusData: number[] = [];
  statusColors: string[] = [];
  statusTableData: DashboardTableData<ProgramStatusStat>[];
  statusChartOptions = {
    ...this.baseChart,
    tooltips: {
      callbacks: {
        label: (tooltipItem: TooltipItem<ChartType>) => {
          const numberOfApps = this.stats[tooltipItem.dataIndex].numberOfApplications;

          return this.i18n.translate(
            'common:hdrApplications'
          ) + ': ' + numberOfApps +
          ` (${this.chartService.getPercent(numberOfApps, this.totalApps)})`;
        },
        beforeLabel: (tooltipItem: TooltipItem<ChartType>, data: ChartData) => {
          return this.chartService.getLabelForTooltip(
            tooltipItem,
            data
          );
        },
        afterLabel: (tooltipItem: TooltipItem<ChartType>) => {
          const totalAmount = this.stats[tooltipItem.dataIndex].requestAmount;

          return this.currencyService.formatMoney(
            totalAmount
          );
        }
      }
    }
  } as ChartOptions;

  constructor (
    private i18n: I18nService,
    private chartService: ChartService,
    private programService: ProgramService,
    private autoTableFactory: AutoTableRepositoryFactory,
    private notifierService: NotifierService,
    private valueComparisonService: ValueComparisonService,
    private clientSettingsService: ClientSettingsService,
    private currencyService: CurrencyService
  ) { }

  async ngOnChanges () {
    this.stats = await this.programService.getProgramStatusStats(
      +this.grantProgramId,
      this.programCycleIds
    );
    this.setupStatusStats();
  }

  setupStatusStats () {
    if (!this.statusRepo) {
      this.statusRepo = this.autoTableFactory.create({
        key: 'PROGRAM_STATUS_STATS',
        columns: [],
        notifier: this.notifierService,
        rowsPerPage: 1000,
        valueComparisonService: this.valueComparisonService,
        rows: this.stats
      });
    } else {
      this.statusRepo.rows = this.stats;
      this.statusRepo.reset();
    }
    this.statusLabels = this.stats.map((item) => {
      return item.statusName;
    });
    this.statusData = this.stats.map((item) => {
      return item.numberOfApplications;
    });
    this.statusColors = this.chartService.getFixedAmountOfColors(
      this.stats.length,
      this.colors
    );
    this.totalApps = this.stats.reduce((acc, item) => {
      return acc + (item.numberOfApplications || 0);
    }, 0);
    this.statusTableData = [{
      columnName: this.i18n.translate(
        'common:hdrStatus'
      ),
      isNumber: false,
      isMoney: false,
      getRouterLink: null,
      isLegendRef: true,
      key: 'statusName'
    }, {
      columnName: this.i18n.translate(
        'common:hdrApplications'
      ),
      isNumber: false,
      isMoney: false,
      getRouterLink: null,
      isLegendRef: false,
      isMixedVal: true,
      getRowValue: (row) => {
        return row.numberOfApplications +
          ` (${this.chartService.getPercent(
            row.numberOfApplications,
            this.totalApps
          )})`;
      },
      key: 'numberOfApplications',
      total: this.totalApps !== 0 ? `${this.totalApps} (100%)` : `${this.totalApps}`
    }, {
      columnName: this.i18n.translate(
        'GLOBAL:hdrRequestAmount'
      ),
      isNumber: false,
      isMoney: false,
      isMixedVal: true,
      getRouterLink: null,
      isLegendRef: false,
      key: 'requestAmount',
      getRowValue: (row) => {
        return this.currencyService.formatMoney(
          row.requestAmount
        );
      },
      total: this.currencyService.formatMoney(
        (this.stats.reduce((acc, item) => {
          return acc + item.requestAmount;
        }, 0))
      )
    }];
  }
}