import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'ucap-chat-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  @Input()
  totalCount = 0;
  @Input()
  curIndex = 0;

  @Output()
  searchText = new EventEmitter<string>();
  @Output()
  prevSearch = new EventEmitter();
  @Output()
  nextSearch = new EventEmitter();
  @Output()
  searchAndPrev = new EventEmitter();
  @Output()
  closeSearchArea = new EventEmitter();

  fgSearch: FormGroup;
  isSearch = false;

  constructor(private formBuilder: FormBuilder, private logger: NGXLogger) {}

  ngOnInit() {
    this.fgSearch = this.formBuilder.group({
      searchInput: null
    });
  }

  onClickSearchCancel() {
    this.isSearch = false;
    this.fgSearch.reset();
    this.closeSearchArea.emit();
  }

  onKeyDownEnter(event: KeyboardEvent, search: string) {
    event.preventDefault();
    event.stopPropagation();

    if (search.trim().length > 0) {
      this.isSearch = true;
      this.searchText.emit(search.trim());
    } else {
      this.isSearch = false;
    }
  }

  onClickPrevSearch() {
    this.prevSearch.emit();
  }
  onClickNextSearch() {
    this.nextSearch.emit();
  }
  onClickSearchAndPrev() {
    this.searchAndPrev.emit();
  }
}
