import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { environment } from '@environment';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { ExternalAPIService } from '@features/external-api/external-api.service';
import { Tab } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { InboundApiModalComponent } from '../inbound-api-modal/inbound-api-modal.component';
import { OutboundApiModalComponent } from '../outbound-api-modal/outbound-api-modal.component';

@Component({
  selector: 'gc-external-api-configuration-page',
  templateUrl: './external-api-configuration-page.component.html',
  styleUrls: ['./external-api-configuration-page.component.scss']
})
export class ExternalAPIConfigurationPageComponent implements OnInit {
  showInboundTab = this.clientSettingsService.clientSettings.canConfigureWebservices;
  showOutboundTab = this.clientSettingsService.clientSettings.allowExternalApis;
  tabs: Tab[] = [this.showInboundTab ? {
    link: 'inbound',
    labelKey: 'CONFIG:hdrExternalApis',
    label: 'External APIs'
  } : undefined, this.showOutboundTab ? {
    link: 'outbound',
    labelKey: 'CONFIG:hdrGrantsConnectApis',
    label: 'GrantsConnect APIs'
  } : undefined].filter((tab) => !!tab);
  metricsString: string;
  externalAPIDocumentationPage = environment.apiUrl;

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

  get isInbound () {
    return location.pathname.includes('inbound');
  }

  async ngOnInit () {
    const metrics = await this.externalApiService.getOutboundApiClientMetrics();
    if (metrics) {
      this.metricsString = this.i18n.translate(
        'common:textOutboundApiCallsToday',
        {},
        'Outbound API calls today'
      ) + `: ${metrics.callsToday} / ${metrics.rateLimitPerDay}`;
    }
  }

  async openInboundApiModal () {
    const response = await this.modalFactory.open(
      InboundApiModalComponent,
      {
        modalType: 'create'
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.externalApiService.createIntegration(response);
      this.spinnerService.stopSpinner();
    }
  }

  openDocumentation () {
    window.open(this.externalAPIDocumentationPage);
  }

  openOutboundApiModal () {
    this.modalFactory.open(
      OutboundApiModalComponent,
      { }
    );
  }
}