import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { ALL_SKIP_FILTER, DebounceFactory, PaginationOptions, TableDataFactory, TopLevelFilter, TopLevelFilterOption } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ConfirmationModalComponent, ModalFactory } from '@yourcause/common/modals';
import { ExternalAPIService } from '../external-api.service';
import { OutboundApiModalComponent } from '../outbound-api-modal/outbound-api-modal.component';
import { ExpirationType, OutboundApiRecordFromApi } from '../outbound-api.typing';
import { RegenerateKeyModalComponent } from '../regenerate-key-modal/regenerate-key-modal.component';

@Component({
  selector: 'gc-outbound-apis-table',
  templateUrl: './outbound-apis-table.component.html',
  styleUrls: ['./outbound-apis-table.component.scss']
})
export class OutboundApisTableComponent implements OnInit {
  tableDataFactory: TableDataFactory<OutboundApiRecordFromApi>;
  topLevelFilters: TopLevelFilter[] = [];
  key = this.externalApiService.outboundApiTableKey;
  ExpirationTypes = ExpirationType;

  constructor (
    private i18n: I18nService,
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private externalApiService: ExternalAPIService
  ) { }

  ngOnInit () {
    this.setTopLevelFilters();
    this.tableDataFactory = DebounceFactory.createSimple(
      async (options: PaginationOptions<OutboundApiRecordFromApi>) => {
        const result = await this.externalApiService.getOutboundApiRecords(options);

        return {
          success: true,
          data: {
            recordCount: result.recordCount,
            records: result.records
          }
        };
      }
    );
  }

  setTopLevelFilters () {
    const statusSelectOptions: TopLevelFilterOption[] = [{
      display: this.i18n.translate(
        'common:textActive',
        {},
        'Active'
      ),
      value: 'active',
      customValue: true,
      customColumn: 'isEnabled'
    }, {
      display: this.i18n.translate(
        'common:textInactive',
        {},
        'Active'
      ),
      value: 'Inactive',
      customValue: false,
      customColumn: 'isEnabled'
    }];
    this.topLevelFilters = [
      new TopLevelFilter(
        'text',
        'name',
        '',
        this.i18n.translate(
          'common:textSearchByName',
          {},
          'Search by name'
        ),
        undefined
      ),
      new TopLevelFilter(
        'typeaheadSingleEquals',
        'status',
        ALL_SKIP_FILTER,
        undefined,
        {
          selectOptions: [{
            display: this.i18n.translate(
              'GLOBAL:textAllGrantsConnectApis',
              {},
              'All GrantsConnect APIs'
            ),
            value: ALL_SKIP_FILTER
          },
            ...statusSelectOptions
          ]
        },
        this.i18n.translate(
          'common:hdrStatus',
          {},
          'Status'
        )
      )
    ];
  }

  editOutboundApi (record: OutboundApiRecordFromApi) {
    this.modalFactory.open(
      OutboundApiModalComponent,
      {
        record
      }
    );
  }

  async regenerateKey (row: OutboundApiRecordFromApi) {
    this.spinnerService.startSpinner();
    const response = await this.externalApiService.generateApiKey(
      row.id
    );
    this.spinnerService.stopSpinner();
    this.modalFactory.open(
      RegenerateKeyModalComponent,
      {
        apiKey: response.token,
        name: row.name
      }
    );
  }

  async toggleEnabled (row: OutboundApiRecordFromApi) {
    const activating = !row.isEnabled;
    const response = await this.modalFactory.open(
      ConfirmationModalComponent,
      {
        modalHeader: this.i18n.translate(
          activating ?
            'common:hdrActivateKey' :
            'common:hdrDeactivateKey',
          {},
          activating ?
          'Activate Key' :
          'Deactivate Key'
        ),
        modalSubHeader: row.name,
        confirmButtonText: this.i18n.translate(
          activating ?
            'GLOBAL:textActivate' :
            'GLOBAL:btnDeactivate',
          {},
          activating ?
            'Activate' :
            'Deactivate'
        ),
        confirmText: this.i18n.translate(
          activating ?
            'common:textAreYouSureActivateKey' :
            'common:textAreYouSureDeactivateKey',
          {},
          activating ?
            'Are you sure you want to activate this key?' :
            'Are you sure you want to deactivate this key?'
        )
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.externalApiService.handleToggleEnabled(
        row.id,
        activating
      );
      this.spinnerService.stopSpinner();
    }
  }
}