import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/switchMap';

import { QueryService } from '../../service/query.service';
import { Defaults } from '../../constant/defaults.constant';
import { Helper } from '../../helper/helper';
import { PersonSearchOptions } from './PersonSearchOptions';

@Component({
  selector: 'rss-person-search',
  templateUrl: `./person-search.component.html`,
  styleUrls: ['./person-search.component.scss']
})
export class PersonSearchComponent implements OnInit, OnChanges {
  @Input() url: String;
  @Input() control: FormGroup;
  @Input() placeholder: string = Defaults.PERSON_SEARCH_PLACEHOLDER;
  @Input() readonly: Boolean;
  @Input() label: any;
  @Input() required: boolean = Defaults.REQUIRED;
  @Input() requiredError: string = Defaults.REQUIRED_PERSON_SEARCH_ERROR_MESSAGE;
  @Input() requiredErrorOnNotSelectedFromDropDown: string = Defaults.REQUIRED_PERSON_SEARCH_ERROR_MESSAGE_NOT_SELECTED_FROM_DROPDOWN;
  @Input() config: any;

  emptyResponseMsg = Defaults.EMPTY_RESPONSE_MSG;
  searchControl: FormControl = new FormControl();
  results: Array<any>;
  onblurValue: boolean = Defaults.REQUIRED;

  constructor(private queryService: QueryService) {
  }

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

    if (this.control.value && (this.control.value.firstName || this.control.value.lastName)) {
      this.searchControl.patchValue(`${this.control.value.firstName} ${this.control.value.lastName}`);
    }
    if (!this.control) {
      console.error(Defaults.MISSING_FORM_CONTROL_ERROR_MESSAGE);
    } else if (this.required) {
      this.searchControl.setValidators(Validators.required);
    }

    this.searchControl.valueChanges
      .filter(val => val && val.length > 1)
      .switchMap(val => this.queryService.query(this.url, { searchTerms: val }))
      .subscribe((results:any) => this.results = results);
    this.clearValue();
  }

  onSelectOption(event) {
    this.control.patchValue(event);
    this.searchControl.patchValue(`${event.firstName} ${event.lastName}`);
  }

  ngOnChanges() {
    this.searchControl.reset();
  }

  clearValue() {
    this.searchControl.valueChanges.subscribe(val => {
      if (!val) {
        this.control.patchValue(null);
      }
    });

  }

  displayRequiredError(fc: FormControl) {
    if (this.required && this.control.value) {
      fc.markAsTouched({onlySelf: true});
    }
    if ((this.required && !fc.touched && this.searchControl.value && this.onblurValue)) {
      this.control.setErrors(Validators.required);
      return true;
    } else if (this.required && fc.touched && !this.searchControl.value && this.control.value !== null) {
      this.control.setErrors(Validators.required);
      return true;
    } else if (this.required && fc.touched && this.searchControl.value === '' && this.control.value === null) {
      this.control.setErrors(Validators.required);
      return true;
    } else if (this.required && fc.touched && this.searchControl.value && !this.control.value && this.onblurValue) {
      this.control.setErrors(Validators.required);
      return true;
    } else {
      return false;
    }
  }

  displayErrors(event) {
    if (event) {
      this.onblurValue = true;
    }
  }

  displayValidationErrorOnSelection(fc: FormControl) {
    if (!this.required && !fc.value && this.searchControl.value && this.onblurValue) {
      this.control.setErrors(Validators.required);
      return true;
    }
  }
}