import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { MainOccupation } from '@msfa-models/slutredovisning.model';
import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
import { RequiredValidator } from '@msfa-validators/required.validator';
import { BehaviorSubject } from 'rxjs';
import { SlutredovisningFormStep0EducationFormData } from './slutredovisning-form-step0-education/slutredovisning-form-step0-education.component';
import { SlutredovisningFormStep0OtherFormData } from './slutredovisning-form-step0-other/slutredovisning-form-step0-other.component';
import { SlutredovisningFormStep0StillUnemployedFormData } from './slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component';
import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work/slutredovisning-form-step0-work.model';

export interface SlutredovisningStep0FormData {
  mainOccupation: MainOccupation;
  education: SlutredovisningFormStep0EducationFormData;
  work: SlutredovisningFormStep0WorkFormData[];
  stillUnemployed: SlutredovisningFormStep0StillUnemployedFormData;
  other: SlutredovisningFormStep0OtherFormData;
}

interface MainOccupationWithLabel {
  label: string;
  key: string;
}

type FormKeys = keyof SlutredovisningStep0FormData;

@Component({
  selector: 'msfa-slutredovisning-form-step0',
  templateUrl: './slutredovisning-form-step0.component.html',
  styleUrls: ['./slutredovisning-form-step0.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0Component implements OnInit {
  shouldValidate$ = new BehaviorSubject<boolean>(false);
  @Output() nextClick = new EventEmitter<SlutredovisningStep0FormData>();
  @Input() formGroup: FormGroup;
  MainOccupation = MainOccupation;

  private mainOccupationFormControlName: FormKeys = 'mainOccupation';

  mainOccupations: MainOccupationWithLabel[] = [
    { label: 'Arbete', key: MainOccupation.Work },
    { label: 'Utbildning', key: MainOccupation.Education },
    { label: 'Fortsatt arbetssökande', key: MainOccupation.StillUnemployed },
    {
      label: 'Byte till ny leverantör i rusta och matcha',
      key: MainOccupation.ByteTillNyLeverantorIRustaOchMatcha,
    },
    { label: 'Annat', key: MainOccupation.Other },
  ];

  get mainOccupationRadioButtonGroup(): RadiobuttonModel[] {
    return this.mainOccupations.map(mainOccupation => ({ label: mainOccupation.label, value: mainOccupation.key }));
  }

  get mainOccupationFormControl(): AbstractControl | undefined {
    return this.formGroup.get(this.mainOccupationFormControlName);
  }

  formControlIsInvalid(formControl: AbstractControl): boolean {
    return formControl.invalid && (formControl.touched || this.shouldValidate$.value);
  }

  verifyAndEmitData(): void {
    this.mainOccupations
      .map(mainOccupations => mainOccupations.key)
      .filter(formGroupKey => this.mainOccupationFormControl.value !== formGroupKey)
      .forEach(notSelectedFormGroupKey => this.formGroup.removeControl(notSelectedFormGroupKey));

    this.shouldValidate$.next(true);
    markControlsAsDirty(Object.values(this.formGroup.controls));
    this.formGroup.markAllAsTouched();

    if (this.formGroup.valid) {
      this.nextClick.emit(this.formGroup.value);
    }
  }

  ngOnInit(): void {
    if (!this.mainOccupationFormControl) {
      this.formGroup.addControl(
        this.mainOccupationFormControlName,
        new FormControl(null, [RequiredValidator('Val av huvudsysselsättning är obligatoriskt')])
      );
    }
  }
}
