import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { SelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import moment from 'moment';
import { ExternalAPIService } from '../external-api.service';
import { ExpirationType, OutboundApiRecordFromApi, ReadWriteTracker, ServiceType } from '../outbound-api.typing';

interface OutboundApiFormGroup {
  outboundApiName: string;
  clientAPIExpirationType: ExpirationType;
}

@Component({
  selector: 'gc-outbound-api-modal',
  templateUrl: './outbound-api-modal.component.html',
  styleUrls: ['./outbound-api-modal.component.scss']
})
export class OutboundApiModalComponent extends YCModalComponent<void> implements OnInit {
  @Input() record: OutboundApiRecordFromApi;

  formGroup: TypeSafeFormGroup<OutboundApiFormGroup>;
  expirationOptions: SelectOption[] = [{
    display: this.i18n.translate(
      'common:textOneYear',
      {},
      'One year'
    ) + ` (${moment().add(1, 'year').format('ll')})`,
    value: ExpirationType.OneYear
  }, {
    display: this.i18n.translate(
      'common:textNever',
      {},
      'Never'
    ),
    value: ExpirationType.Never
  }];
  primaryButtonText: string;
  isKeyView = false;
  saveText = this.i18n.translate(
    'common:btnSave',
    {},
    'Save'
  );
  cancelText = this.i18n.translate(
    'common:btnCancel',
    {},
    'Cancel'
  );
  nextText = this.i18n.translate(
    'common:btnNext',
    {},
    'Next'
  );
  closeText = this.i18n.translate(
    'common:textClose',
    {},
    'Close'
  );
  currentServices = this.externalApiService.getCurrentServices();
  servicesMap: Partial<Record<ServiceType, ReadWriteTracker>> = {};
  apiKey: string;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private externalApiService: ExternalAPIService,
    private spinnerService: SpinnerService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.setButtons();
    this.setServicesMap();
    this.formGroup = this.formBuilder.group({
      outboundApiName: [
        this.record?.name ?? '',
        Validators.required
      ],
      clientAPIExpirationType: this.record?.clientAPIExpirationType ??
        ExpirationType.OneYear
    });
  }

  setServicesMap () {
    const map: Partial<Record<ServiceType, ReadWriteTracker>> = {};
    this.currentServices.forEach((service) => {
      map[service.type] = {
        read: this.hasReadOrWrite(service.type, true),
        write: this.hasReadOrWrite(service.type, false)
      };
    });
    this.servicesMap = map;
  }

  hasReadOrWrite (serviceType: ServiceType, isRead: boolean) {
    if (this.record) {
      const found = this.record.services.find((service) => {
        return service.clientAPIServiceTypeId === serviceType;
      });

      if (found) {
        return isRead ? found.canRead : found.canWrite;
      }
    }

    return false;
  }

  setButtons () {
    if (this.record) {
      this.primaryButtonText = this.saveText;
    } else {
      if (this.isKeyView) {
        this.primaryButtonText = this.closeText;
      } else {
        this.primaryButtonText = this.nextText;
      }
    }
  }

  async onPrimaryClick () {
    if (this.record) {
      await this.saveChanges();
      this.closeModal.emit();
      this.analyticsService.emitEvent({
        eventName: 'Save outbound API changes',
        eventType: EventType.Click,
        extras: null
      });
    } else if (this.isKeyView) {
      this.closeModal.emit();
    } else {
      // Save and proceed to next step (if successful)
      await this.saveChanges();
      if (this.apiKey) {
        this.isKeyView = true;
        this.setButtons();
      }
      this.analyticsService.emitEvent({
        eventName: 'Save outbound API changes',
        eventType: EventType.Click,
        extras: null
      });
    }
  }

  async saveChanges () {
    this.spinnerService.startSpinner();
    const formVal = this.formGroup.value;
    const name = formVal.outboundApiName;
    const isEnabled = true;
    const services = this.externalApiService.adaptServicesForSave(this.servicesMap);
    if (this.record) {
      await this.externalApiService.handleUpdateOutboundApiRecord(
        this.record.id,
        {
          name,
          isEnabled,
          services
        }
      );
    } else {
      const token = await this.externalApiService.handleCreateOutboundApiRecord({
        name,
        isEnabled,
        clientAPIExpirationType: formVal.clientAPIExpirationType,
        services
      });
      this.apiKey = token;
    }
    this.spinnerService.stopSpinner();
  }

}