component.ts

import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';
import { Option, Service } from '@shared/models';
import { ProvidersService } from '@shipping/shared/services/providers/providers.service';
import { TranslateService } from '@ngx-translate/core';

import * as _ from 'lodash';

@Component({
  selector: 'app-service-options',
  templateUrl: './service-options.component.pug',
  styleUrls: ['./service-options.component.scss']
})

export class ServiceOptionsComponent implements OnInit {
  @Input() service: Service;
  @Input() options: Option[];
  @Output() selectedOptions = new EventEmitter<any>();

  serviceOptionsForm: FormGroup;
  serviceSubOptionsForm: FormGroup;
  selectedServiceOptions: any[];

  constructor(
    private _providers: ProvidersService,
    private _translate: TranslateService,
    private _fb: FormBuilder,
  ) { }


  ngOnInit() {
    this.createServiceOptionsFormGroup();
  }

  private createServiceOptionsFormGroup() {
    this.serviceOptionsForm = this._fb.group({
      options: this.createServiceOptionsFormArray(this.options)
    });
    this.getSelectedOptions();
  }

  private createServiceOptionsFormArray(options: Option[]) {
    const optionFormControlsOrArrays: any[] = options.map(option => {
      // List of sub-options, e.g: proof of age: 18 or 21
      if (!_.isEmpty(option.list)) {
        // Create nested FormArray for sub-options
        const subOptionFormControls = _.map(option.list, (subOption) => {
          return this._fb.control(subOption.selected || false);
        });
          this.serviceSubOptionsForm = this._fb.group({
           subOptions: this._fb.array(subOptionFormControls)
          });
          return this.serviceSubOptionsForm;
      } else {
        return this._fb.control(option.selected || false);
      }
    });
    return this._fb.array(optionFormControlsOrArrays);

  }

  getSelectedOptions() {
    this.selectedServiceOptions = _.map(
      this.serviceOptionsForm.controls.options['controls'],
      (option, i) => {
        if (option.value && this.options[i].code) {
          const res =  {
            code: this.options[i].code,
            value: !_.isNil(this.options[i].list) ? this.options[i].list[0].code : null, // TODO: Handle sub-options in an option
          };
          return res;
      }
    });
    // this.getSelectedOptionsName();
  }

  getSelectedOptionsName() {
    this.selectedServiceOptions = _.filter(this.selectedServiceOptions, (option) => {
      if (option !== false) {
        return option;
      }
    });
  }

  selectServiceOptions() {
    this.getSelectedOptions();
    console.log('Selected option res: ', this.selectedServiceOptions);
    this.selectedOptions.emit(this.selectedServiceOptions);
  }

  get optionsFormArray() {
    return this.serviceOptionsForm.get('options') as FormArray;
  }

}