import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { SimpleGrantsAddress, TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup, YcFile } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { AddressRequestsService } from '../address-requests.service';
import { AddressRequestApproveApi, AddressRequestForUI, AddressRequestRejectApi, RejectAddressRequestReason } from '../address-requests.typing';
interface ApproveRejectFormGroup {
  reason: RejectAddressRequestReason;
  comment: string;
  file: YcFile;
}

@Component({
  selector: 'gc-approve-reject-address-request-modal',
  templateUrl: './approve-reject-address-request-modal.component.html',
  styleUrls: ['./approve-reject-address-request-modal.component.scss']
})
export class ApproveRejectAddressRequestModalComponent extends YCModalComponent<
  AddressRequestApproveApi|AddressRequestRejectApi
> implements OnInit {
  @Input() approve = true;
  @Input() addressRequest: AddressRequestForUI;

  saving = false;
  formGroup: TypeSafeFormGroup<ApproveRejectFormGroup>;
  rejectRequestReasons: TypeaheadSelectOption[] = [{
    label: this.i18n.translate(
      'GLOBAL:textNotForCharitablePurpose',
      {},
      'Not for charitable purpose'
    ),
    value: RejectAddressRequestReason.NOT_FOR_CHARITABLE_PURPOSE
  }, {
    label: this.i18n.translate(
      'GLOBAL:textInsufficientDocumentation',
      {},
      'Insufficient documentation'
    ),
    value: RejectAddressRequestReason.INSUFFICIENT_DOCUMENTATION
  }, {
    label: this.i18n.translate(
      'common:textOther',
      {},
      'Other'
    ),
    value: RejectAddressRequestReason.OTHER
  }];
  differencesMap: Record<keyof SimpleGrantsAddress, boolean> = {
    address: false,
    address2: false,
    city: false,
    state: false,
    postalCode: false,
    country: false
  };

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

  ngOnInit () {
    this.setDifferencesMap();
    const reason: any = this.approve ?
      null :
      [null, Validators.required];
    this.formGroup = this.formBuilder.group<ApproveRejectFormGroup>({
      reason,
      comment: '',
      file: null
    });
  }

  setDifferencesMap () {
    Object.keys(this.differencesMap).map((key) => {
      return key as keyof SimpleGrantsAddress;
    }).forEach((key) => {
      const isDifferent = this.addressRequest.oldAddress[key] !== this.addressRequest.newAddress[key];
      this.differencesMap[key] = isDifferent;
    });
  }

  async save () {
    this.saving = true;
    const formVal = this.formGroup.value;
    const addressRequestId = this.addressRequest.addressRequestId;
    if (this.approve) {
      let fileId: number = null;
      if (formVal.file instanceof YcFile) {
        this.spinnerService.startSpinner();
        fileId = await this.addressRequestService.uploadApprovalFile(
          formVal.file.file as File,
          this.addressRequest.applicationId
        );
        this.spinnerService.stopSpinner();
      }
      this.closeModal.emit({
        addressRequestId,
        fileId,
        comment: formVal.comment
      });
      this.analyticsService.emitEvent({
        eventName: 'Approve address request',
        eventType: EventType.Click,
        extras: null
      });
    } else {
      this.closeModal.emit({
        addressRequestId,
        comment: formVal.comment,
        reason: formVal.reason
      });
      this.analyticsService.emitEvent({
        eventName: 'Reject address request',
        eventType: EventType.Click,
        extras: null
      });
    }
    this.saving = false;
  }
}