import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { MainOccupation, StillUnemployedReason } from '@msfa-models/slutredovisning.model';
import { SlutredovisningFormStep0StillUnemployed } from './slutredovisning-form-step0-still-unemployed.validator';

type ReasonCheckboxValues = { [key: string]: boolean };

export interface SlutredovisningFormStep0StillUnemployedFormData {
  reasonsGoalNotReached: ReasonCheckboxValues;
  stillUnemployedExplanation?: string;
}

type FormKeys = keyof SlutredovisningFormStep0StillUnemployedFormData;

interface CheckboxModel {
  label: string;
  formControlName: string;
}

@Component({
  selector: 'msfa-slutredovisning-form-step0-still-unemployed',
  templateUrl: './slutredovisning-form-step0-still-unemployed.component.html',
  styleUrls: ['./slutredovisning-form-step0-still-unemployed.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlutredovisningFormStep0StillUnemployedComponent implements OnInit {
  readonly formGroupKey: MainOccupation = MainOccupation.StillUnemployed;
  StillUnemployedReason = StillUnemployedReason;

  @Input() formGroupRef: FormGroup;
  @Input() formData: SlutredovisningFormStep0StillUnemployedFormData;
  @Input() shouldValidate: boolean;

  private stillUnemployedReasonFormControlName: FormKeys = 'reasonsGoalNotReached';
  private stillUnemployedExplanationFormControlName: FormKeys = 'stillUnemployedExplanation';

  //anledning_mal_ej_uppnatt
  stillUnemployedReasonOptions: CheckboxModel[] = [
    { label: 'Saknar relevant utbildning', formControlName: StillUnemployedReason.SaknarRelevantUtbildning },
    { label: 'Saknar arbetslivserfarenhet', formControlName: StillUnemployedReason.SaknarArbetslivserfarenhet },
    { label: 'Saknar nätverk och kontakter', formControlName: StillUnemployedReason.SaknarNatverkOchKontakter },
    {
      label: 'Bristande språkkunskaper i svenska',
      formControlName: StillUnemployedReason.BristandeSprakkunskaperISvenska,
    },
    {
      label: 'Konjunkturläget',
      formControlName: StillUnemployedReason.KonjukturLaget,
    },
    {
      label: 'Annat',
      formControlName: StillUnemployedReason.Annat,
    },
  ];

  formGroup: FormGroup | AbstractControl;

  get showExplanationTextArea(): boolean {
    const reasonsValue: ReasonCheckboxValues | undefined = this.stillUnemployedReasonFormControl
      ?.value as ReasonCheckboxValues;
    return reasonsValue[StillUnemployedReason.Annat] === true;
  }

  get stillUnemployedReasonFormControl(): AbstractControl | undefined {
    return this.formGroup.get(this.stillUnemployedReasonFormControlName);
  }

  get stillUnemployedReasonDescriptionFormControl(): AbstractControl | undefined {
    return this.formGroup.get(this.stillUnemployedExplanationFormControlName);
  }

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

  ngOnInit(): void {
    if (this.formGroupRef.get(this.formGroupKey)) {
      this.formGroup = this.formGroupRef.get(this.formGroupKey);
    } else {
      const reasonsFormControls: { [key: string]: AbstractControl } = {};

      this.stillUnemployedReasonOptions.forEach(reason => {
        reasonsFormControls[reason.formControlName] = new FormControl(false);
      });

      this.formGroup = new FormGroup(
        {
          [this.stillUnemployedReasonFormControlName]: new FormGroup(reasonsFormControls),
          [this.stillUnemployedExplanationFormControlName]: new FormControl(null),
        },
        [SlutredovisningFormStep0StillUnemployed.slutredovisningFormStep0StillUnemployedIsValid()]
      );
      this.formGroupRef.addControl(this.formGroupKey, this.formGroup);
    }
  }
}
