import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { QuestionBase } from '../../../../models/employee.model';

@Component({
  selector: 'app-question-form',
  templateUrl: './question-form.component.html',
  styleUrls: ['./question-form.component.scss']
})
export class QuestionFormComponent implements OnInit {

  @Input() question: QuestionBase<any>;
  @Input() form: FormGroup;
  @Input() isStarRating: boolean;
  @Output() change = new EventEmitter<any>();
  formArray = [];
  get isValid() {
    return this.form.controls[this.question.key].valid;
  }

  constructor() { }

  ngOnInit() {
  }

  checkIndex(n) {
    return n % 2 === 0 ? true : false;
  }

  onChange(key: string, value: string, isChecked: boolean) {
    event.preventDefault();
    const map = new Map<string, string>();
    if (isChecked) {
      this.formArray.push(value);
    } else {
      const index = this.formArray.findIndex(x => x.value === value);
      this.formArray.splice(index);
    }
    map.set(key, this.formArray.join('|'));
    this.change.emit(map);
  }

  getRatingQuestion(key: string) {
    return key + '-feedback';
  }


  getRatingType(key: string) {
    if (key === 'overallRating-feedback') {
      return true;
    } else if (key !== 'overallRating-feedback' && this.isStarRating) {
      return true;
    } else {
      return false;
    }
  }

}
