import { Component, Input, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { WorkflowDetailResolver } from '@features/workflow/resolvers/workflow-detail.resolver';
import { WorkflowService } from '@features/workflow/workflow.service';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
interface ReRouteFormGroup {
  workflowLevel: number;
  comments: string;
}
interface ReRouteResponse {
  comments: string;
  workflowLevelId: number;
}

@Component({
  selector: 'gc-reroute-application-modal',
  templateUrl: './reroute-application-modal.component.html',
  styleUrls: ['./reroute-application-modal.component.scss']
})
export class RerouteApplicationModalComponent extends YCModalComponent<ReRouteResponse> implements OnInit {
  @Input() currentWorkflowLevelId: number;
  @Input() workflowId: number;

  workflowOptions: TypeaheadSelectOption<number>[];
  formGroup: TypeSafeFormGroup<ReRouteFormGroup>;

  constructor (
    private spinnerService: SpinnerService,
    private formBuilder: TypeSafeFormBuilder,
    private workflowService: WorkflowService,
    private workflowDetailResolver: WorkflowDetailResolver,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    this.spinnerService.startSpinner();
    await this.workflowDetailResolver.fetchDetail(this.workflowId);

    const workflow = this.workflowService.get('workflowMap')[this.workflowId];
    this.workflowOptions = workflow.levels.filter((level) => {
      return +level.id !== +this.currentWorkflowLevelId;
    }).reduce((acc, level) => [
      ...acc,
      {
        display: level.name,
        value: level.id
      },
      ...level.subLevels.map(subLevel => ({
        display: level.name + ' / ' + subLevel.name,
        value: subLevel.id
      }))
    ], []);

    this.formGroup = this.formBuilder.group<ReRouteFormGroup>({
      workflowLevel: this.currentWorkflowLevelId,
      comments: ''
    });
    this.spinnerService.stopSpinner();
  }

  submit () {
    const { value } = this.formGroup;
    this.closeModal.emit({
      comments: value.comments,
      workflowLevelId: value.workflowLevel
    });
    this.analyticsService.emitEvent({
      eventName: 'Reroute application',
      eventType: EventType.Click,
      extras: null
    });
  }
}