import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {EnvProperties} from "../utils/properties/env-properties";
import {Observable} from "rxjs";
import {map, startWith} from "rxjs/operators";

@Component({
  selector: 'contact-us',
  templateUrl: './contact-us.component.html',
})

export class ContactUsComponent implements OnInit {
  @Input()
  public contactForm: FormGroup;
  @Input() formTitle: string;
  @Input() properties: EnvProperties;
  @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
  @Input() errorMessage;
  @Input()
  public organizationTypes: string[];
  public autoCompleteTypes: Observable<string[]>;
  
  constructor() {
  }
  
  ngOnInit() {
    this.autoCompleteTypes = this.contactForm.get('organizationType').valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }
  
  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.organizationTypes.filter(option => option.toLowerCase().includes(filterValue));
  }
  
  public send() {
    this.sendEmitter.emit({
      valid: this.contactForm.valid
    });
  }
  
  public handleRecaptcha(captchaResponse: string) {
    this.contactForm.get('recaptcha').setValue(captchaResponse);
  }
}