import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { CustomDataTablesService } from '@features/custom-data-tables/custom-data-table.service';
import { TopLevelFilter, TypeaheadSelectOption } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';

@Component({
  selector: 'gc-translate-data-tables-page',
  templateUrl: './translate-data-tables-page.component.html',
  styleUrls: ['./translate-data-tables-page.component.scss']
})

export class TranslateDataTablesPageComponent implements OnInit {
  topLevelFilters: TopLevelFilter[];
  dataTableOptions: TypeaheadSelectOption[] = [];
  ready = false;

  constructor (
    private i18n: I18nService,
    private customDataTableService: CustomDataTablesService,
    private spinnerService: SpinnerService
  ) { }

  async ngOnInit () {
    this.spinnerService.startSpinner();
    this.dataTableOptions = await this.customDataTableService.getDataTableOptions();
    this.setFilters();
    this.spinnerService.stopSpinner();
  }


  setFilters () {
    const dataTableFilter = new TopLevelFilter(
      'checkboxDropdown',
      'picklistGuid',
      [],
      this.i18n.translate(
        'FORMS:textSearchForACustomDataTable',
        {},
        'Search for a custom data table'
      ),
      {
        selectOptions: this.dataTableOptions,
        filterObjectName: this.i18n.translate(
          'FORMS:textTable', {}
        ).toLowerCase(),
        filterObjectNamePlural: this.i18n.translate(
          'FORMS:textTables', {}
        ).toLowerCase()
      }
    );
    this.topLevelFilters = [
      new TopLevelFilter(
        'text',
        'defaultTranslationText',
        '',
        this.i18n.translate(
          'FORMS:textSearchTranslations',
          {},
          'Search translations'
        )
      )
    ];
    if (this.dataTableOptions.length > 0) {
      this.topLevelFilters.push(dataTableFilter);
    }
    this.ready = true;
  }


  getDefaultTableOnFilterChange = (guids: string[]) => {
    return this.customDataTableService.getMostCommonDefaultLangFromArray(guids);
  };
}