import { FormSelectItem } from '@af/digi-ng/_form/form-select';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { IconType } from '@msfa-enums/icon-type.enum';
import { Deltagare } from '@msfa-models/deltagare.model';
import { ReportsData } from '@msfa-models/reports.model';
import { WorkExperience } from '@msfa-models/work-experience.model';
import { DeltagareService } from '@msfa-services/api/deltagare.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'msfa-deltagare-card',
  templateUrl: './deltagare-card.component.html',
  styleUrls: ['./deltagare-card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareCardComponent {
  deltagare$: Observable<Deltagare> = this.deltagareService.deltagare$;
  reportsData$: Observable<ReportsData> = this.deltagareService.reportsData$;

  readonly reportsFormControlName = 'reports';

  reportPickerFormGroup: FormGroup = this.formBuilder.group({
    // eslint-disable-next-line  @typescript-eslint/unbound-method
    reports: this.formBuilder.control('', [Validators.required]),
  });

  selectableReportTypes: Array<FormSelectItem> = [
    { name: 'Avvikelse', value: 'avvikelse' },
    { name: 'Gemensam Planering', value: 'planering' },
  ];
  selectedReportType: FormSelectItem;

  firstVisibleWorkExperiences$: Observable<WorkExperience[]> = this.deltagare$.pipe(
    map(deltagare => deltagare.workExperiences.slice(0, 2))
  );
  hiddenWorkExperiences$: Observable<WorkExperience[]> = this.deltagare$.pipe(
    map(deltagare => deltagare.workExperiences.slice(2))
  );

  iconType = IconType;
  accordionExpanded = false;

  constructor(
    private activatedRoute: ActivatedRoute,
    private deltagareService: DeltagareService,
    private formBuilder: FormBuilder,
    private router: Router
  ) {
    this.deltagareService.setCurrentDeltagareId(this.activatedRoute.snapshot.params.deltagareId);
  }

  get reportsFormControl(): AbstractControl | null {
    return this.reportPickerFormGroup?.get(this.reportsFormControlName);
  }

  toggleAccordionExpanded(): void {
    this.accordionExpanded = !this.accordionExpanded;
  }

  setNewPage(page: number): void {
    this.deltagareService.setPage(page);
  }

  onFormSubmitted(event: Event, reportType: string, deltagareId: string): void {
    event.preventDefault();

    switch (reportType) {
      case 'planering':
        if (this.reportsFormControl.valid) {
          this.router.navigate(['/deltagare/planering', deltagareId]).catch(error => {
            console.error(error);
          });
        }
        break;
      case 'avvikelse':
        if (this.reportsFormControl.valid) {
          this.router.navigate(['/deltagare/rapportera', deltagareId]).catch(error => {
            console.error(error);
          });
        }
        break;
      default:
        return;
    }

    this.reportsFormControl.markAsTouched();

    if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
      return;
    }

    const selectedReportType = this.selectableReportTypes.find(report => {
      return report.value === this.reportsFormControl.value;
    });

    this.deltagareService.setReportType(selectedReportType);
  }
}
