import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ContactInformationCompact } from '@msfa-models/api/contact-information.response.model';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DeltagareAvvikelseService } from '../../pages/deltagare-report/services/deltagare-avvikelse.service';


@Component({
  selector: 'msfa-report-layout',
  templateUrl: './report-layout.component.html',
  styleUrls: ['./report-layout.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReportLayoutComponent {
  @Input() reportTitle = 'Report Title';
  @Input() reportSubTitle = 'Report Sub Title';
  @Input() description = 'Report description ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem';
  @Input() startDate: string;
  @Input() endDate: string;
  @Input() service: string;
  @Input() isPeriodDate = false;
  @Input() totalAmountOfSteps = 3;
  @Input() currentStep = 1;
  @Input() form: FormGroup | null = null;
  @Input() reportName: string;
  @Input() showSuccessNotification = false;
  @Input() showDangerNotification = false;
  @Output() currentStepEvent = new EventEmitter<number>();
  @Output() sendRequestEvent = new EventEmitter<boolean>();

  contactInformation$: Observable<ContactInformationCompact> = this.activatedRoute.params
    .pipe(
      switchMap(({ deltagareId }) => this.deltagareAvvikelseService.getContactInformationCompact$(deltagareId))
    );

  constructor(
    private deltagareAvvikelseService: DeltagareAvvikelseService,
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) { }

  nextStep(): void {
    console.log(this.form);

    if (this.form.valid && this.currentStep < this.totalAmountOfSteps) {
      this.currentStep++;
      this.currentStepEvent.emit(this.currentStep);
    }
    this.form.markAllAsTouched();
  }

  previousStep(): void {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.currentStepEvent.emit(this.currentStep);
      this.showSuccessNotification = false;
      this.showDangerNotification = false;
    }
    this.currentStep !== this.totalAmountOfSteps ? this.sendRequestEvent.emit(false) : null;
  }

  sendRequest(): void {
    this.sendRequestEvent.emit(true);
  }

  backToDeltagare(): void {
    void this.router.navigate(['./deltagare', this.activatedRoute.snapshot.params['deltagareId']]);
  }

}
