import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { FormMaskingService } from '@core/services/form-masking.service';
import { LocationService } from '@core/services/location.service';
import { AdHocReportingUI } from '@core/typings/ui/ad-hoc-reporting.typing';
import { BudgetService } from '@features/budgets/budget.service';
import { RootObjectNames } from '@features/reporting/services/ad-hoc-reporting-definitions.service';
import { AdHocReportingService } from '@features/reporting/services/ad-hoc-reporting.service';
import { APISortColumn, TableDataFactory } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { DEFAULT_ROWS_PER_PAGE } from '../dashboards.typing';

@Component({
  selector: 'gc-table-widget',
  templateUrl: './table-widget.component.html',
  styleUrls: ['./table-widget.component.scss']
})
export class TableWidgetComponent implements OnChanges, OnInit {
  @Input() tableDataFactory: TableDataFactory<any>;
  @Input() drilldownColumns: AdHocReportingUI.ColumnImplementation[];
  @Input() object: RootObjectNames;
  @Input() rowsPerPage = DEFAULT_ROWS_PER_PAGE;
  @Output() onSortColumnChange = new EventEmitter<APISortColumn<any>>();
  @Output() maskedChanged = new EventEmitter<boolean>();

  showBudgetDetailLink = false;
  showFsDetailLink = false;
  showMaskToggle = false;
  masked = false;
  detailLinkTooltipText = '';
   customNoRecordsMessage = this.i18n.translate(
    'common:textNoDataAvailable',
    {},
    'No data available'
  );

  constructor (
    private formMaskingService: FormMaskingService,
    private adHocReportingService: AdHocReportingService,
    private budgetService: BudgetService,
    private locationService: LocationService,
    public i18n: I18nService
  ) { }

  ngOnChanges () {
    this.setDetailLinkInfo();
  }

  ngOnInit () {
    this.setShowMask();
  }

  setShowMask () {
    const maskResult = this.formMaskingService.checkShouldShowMaskToggleForAdHoc(this.drilldownColumns);
    this.showMaskToggle = maskResult.shouldShow;
    this.masked = maskResult.defaultSetting;
    this.maskedChanged.emit(this.masked);
  }

  setDetailLinkInfo () {
    const info = this.adHocReportingService.getDetailLinkInfo(this.object);

    this.showBudgetDetailLink = info.showBudgetDetailLink;
    this.showFsDetailLink = info.showFsDetailLink;
    this.detailLinkTooltipText = info.detailLinkTooltipText;
  }

  navigateToDetail (row: Record<string, Record<string, number|string|boolean>>) {
    if (this.showBudgetDetailLink || this.showFsDetailLink) {
      const isBudget = this.showBudgetDetailLink;
      const path = this.budgetService.getUrlForDetail(
        isBudget,
        isBudget ? +row.budget.id : +row.fundingSource.id
      );
      window.open(
        this.locationService.getRelativeUrl(path)
      );
    } else {
      this.locationService.navigateToApp(row, this.object);
    }
  }

  toggleMask () {
    this.masked = !this.masked;
    this.maskedChanged.emit(this.masked);
  }
}