import { Component, OnInit } from '@angular/core';
import { cloneDeep } from 'lodash';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'esp-multiple-search-modal',
  templateUrl: './multiple-search-modal.component.html',
  styleUrls: ['./multiple-search-modal.component.scss']
})
export class MultipleSearchComponent implements OnInit {
  config = null;
  searchedItems = [];
  tempSearchedItem: string = '';
  i18n;
  constructor(public bsModalRef: BsModalRef) {}

  ngOnInit(): void {
    this.searchedItems = cloneDeep(this.config.searchedItems);
    this.i18n = this.config.i18n;
  }

  onClose() {
    this.config.cancelCallback(true);
    this.bsModalRef.hide();
  }

  addSearch() {
    //checking duplicate item
    this.tempSearchedItem = this.tempSearchedItem.trim();
    if (
      this.tempSearchedItem &&
      !this.searchedItems.find(item => item === this.tempSearchedItem)
    ) {
      this.searchedItems.push(this.tempSearchedItem);
      this.tempSearchedItem = '';
    }
  }

  searchText(event) {
    this.tempSearchedItem = (event.target as HTMLInputElement).value;
  }

  onSearch(event) {
    this.config.searchCallback(this.searchedItems);
    this.bsModalRef.hide();
  }

  removeAll() {
    this.searchedItems = [];
  }

  removeSearchItem(index) {
    this.searchedItems = this.searchedItems.filter((item, i) => i !== index);
  }
}