import {Component, Input, OnInit} from '@angular/core';
import { FormControl, FormArray } from '@angular/forms';

import { CheckboxOptions } from './CheckboxOptions';
import { Defaults } from '../../constant/defaults.constant';
import { Helper } from '../../helper';

@Component({
  selector: 'rss-check-box',
  templateUrl: './check-box.component.html',
  styleUrls: ['./check-box.component.scss']
})
export class CheckBoxComponent implements OnInit {

  @Input() formArray: FormArray;
  @Input() config: any;
  @Input() readonly: Boolean;

  @Input() label: string = '';
  @Input() displayKey: string = Defaults.DATASOURCE_DISPLAY_KEY;
  @Input() options: any;
  @Input() required: boolean = Defaults.REQUIRED;
  @Input() requiredError: string = Defaults.AT_LEAST_ONE_ERROR_MESSAGE;
  @Input() theme: string = Defaults.THEME;

  emptyResponseMsg: string = Defaults.EMPTY_RESPONSE_MSG;

  constructor() { }

  ngOnInit() {
    if (this.config) {
      const config = new CheckboxOptions(this.config);
      Helper.merge(this, config);

      this.options = this.options || this.config.options;
    }

    if (!this.formArray) {
      console.error(Defaults.MISSING_FORM_ARRAY_ERROR_MESSAGE);
    } else if (!this.options) {
      console.error(Defaults.MISSING_DATA_SOURCE_ERROR_MESSAGE);
    } else {
      if (this.required) {
        this.formArray.setValidators(Helper.atLeastOneRequired);
      }
    }

  }

  isSelected(item: any) {
    const selectedElements = (this.formArray && this.formArray.controls) ?
      this.formArray.controls.map((control) => control.value && control.value[this.displayKey]) : [];
    return selectedElements.includes(item[this.displayKey]);
  }

  onCheckboxChange(checked: any, item: any, fa: FormArray) {
    const index = (fa && fa.controls) ? fa.controls.findIndex(ctrl => ctrl.value[this.displayKey] === item[this.displayKey]) : -1;
    checked ? fa.push(new FormControl(item)) : fa.removeAt(index);
  }
}