import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { APIExternalAPI } from '@core/typings/api/external-api.typing';
import { DebounceFactory, PaginationOptions, TableDataFactory, TopLevelFilter } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ConfirmationModalComponent, ModalFactory } from '@yourcause/common/modals';
import { ExternalAPIService } from '../external-api.service';
import { InboundApiModalComponent } from '../inbound-api-modal/inbound-api-modal.component';

@Component({
  selector: 'gc-inbound-apis-table',
  templateUrl: './inbound-apis-table.component.html',
  styleUrls: ['./inbound-apis-table.component.scss']
})
export class InboundApisTableComponent implements OnInit {
  tableDataFactory: TableDataFactory<APIExternalAPI.ExternalAPIConfiguration>;
  topLevelFilters: TopLevelFilter[] = [];
  key = this.externalApiService.inboundApiTableKey;

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

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

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

  setTopLevelFilters () {
    this.topLevelFilters = [
      new TopLevelFilter(
        'text',
        'nameOrUrl',
        '',
        this.i18n.translate(
          'common:lblSearchByNameOrHostUrl',
          {},
          'Search by name or host url'
        ),
        undefined,
        undefined,
        [{
          column: 'name',
          filterType: 'cn'
        }, {
          column: 'url',
          filterType: 'cn'
        }]
      )
    ];
  }

  async deleteInboundApi (service: APIExternalAPI.ExternalAPIConfiguration) {
    const deps = {
      modalHeader: this.i18n.translate(
        'CONFIG:hdrDeleteExternalAPI',
        {},
        'Delete External API'
      ),
      confirmButtonText: this.i18n.translate(
        'common:btnDelete',
        {},
        'Delete'
      ),
      confirmText: this.i18n.translate(
        'CONFIG:textDeleteExternalAPI',
        {
          name: service.name
        },
        'Are you sure you want to delete the __name__ service?'
      )
    };
    const response = await this.modalFactory.open(
      ConfirmationModalComponent,
      deps
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.externalApiService.deleteIntegration(service);
      this.spinnerService.stopSpinner();
    }
  }

  async editInboundApi (
    service: APIExternalAPI.ExternalAPIPayload
  ) {
    const response = await this.modalFactory.open(
      InboundApiModalComponent,
      {
        modalType: 'edit',
        service
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.externalApiService.updateIntegration(response);
      this.spinnerService.stopSpinner();
    }
  }
}