import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { WorkflowLevelRoute } from '@core/typings/workflow.typing';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
interface RouteFormGroup {
  comment: string;
  level: number;
}

@Component({
  selector: 'gc-route-application-modal',
  templateUrl: './route-application-modal.component.html',
  styleUrls: ['./route-application-modal.component.scss']
})
export class RouteApplicationModalComponent extends YCModalComponent<{ comment: string; level: number }> implements OnInit {
  @Input() workflowLevelRoutes: WorkflowLevelRoute[];
  @Input() isNomination = false;

  workflowOptions: TypeaheadSelectOption[] = [];
  modalHeader = '';
  primaryButtonText = this.i18n.translate(
    'GLOBAL:textConfirmAndRoute',
    {},
    'Confirm and route'
  );
  numberOfApplications = 1;
  formGroup: TypeSafeFormGroup<RouteFormGroup>;

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

  ngOnInit () {
    if (this.numberOfApplications > 1) {
      this.modalHeader = this.i18n.translate(
        this.isNomination ?
          'MANAGE:textRouteNominations' :
          'MANAGE:textRouteApplications',
        {},
        this.isNomination ?
          'Route Nominations' :
          'Route Applications'
      );
    } else {
      this.modalHeader = this.i18n.translate(
        this.isNomination ?
          'MANAGE:textRouteNomination' :
          'MANAGE:textRouteApplication',
        {},
        this.isNomination ?
          'Route Nomination' :
          'Route Application'
      );
    }
    this.workflowOptions = this.workflowLevelRoutes.map((route) => {
      return {
        label: route.name,
        value: route.workflowLevelId
      };
    });
    this.formGroup = this.formBuilder.group<RouteFormGroup>({
      comment: '',
      level: [
        this.workflowOptions[0]?.value ?? null,
        Validators.required
      ]
    });
  }

  onCancel () {
    this.closeModal.emit();
  }

  onSubmit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Route app modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }

}