import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  HostListener,
  Input,
  OnInit,
  Output,
  ViewChild
} from '@angular/core';
import {AbstractControl} from '@angular/forms';
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
import {InputComponent} from "../input/input.component";

@Component({
  selector: '[search-input]',
  template: `
    <div *ngIf="searchControl || value" class="uk-flex uk-flex-right uk-width-1-1">
      <div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
        <div class="uk-flex uk-flex-middle">
          <div class="uk-width-expand">
            <div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
                 [disabled]="disabled" [formInput]="searchControl"></div>
          </div>
          <div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
            <a class="uk-link-text" (click)="reset()">
              <icon name="close" [flex]="true"></icon>
            </a>
          </div>
          <div class="uk-width-auto">
            <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
              <icon name="search" [flex]="true" ratio="1.3"></icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class SearchInputComponent implements OnInit {
  @Input() disabled: boolean = false;
  @Input() searchInputClass: string = 'inner';
  @Input() searchControl: AbstractControl;
  @Input() value: string;
  @Input() placeholder: string;
  @Input() expandable: boolean = false;
  @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
  @ViewChild('searchInput') searchInput: ElementRef;
  @ViewChild('input') input: InputComponent;
  public expanded: boolean = true;
  
  constructor(private cdr: ChangeDetectorRef) {
  }
  
  @HostListener('document:click', ['$event'])
  click(event) {
    if(event.isTrusted && this.expandable && !this.disabled) {
      this.expand(this.searchInput && this.searchInput.nativeElement.contains(event.target));
    }
  }
  
  ngOnInit() {
    this.expanded = !this.expandable;
  }
  
  expand(value: boolean) {
    this.expanded = value;
    this.cdr.detectChanges();
    if(this.expanded) {
      this.input.focus(true);
    }
  }
  
  public search(event) {
    if(!this.disabled) {
      if (this.expandable) {
        this.expand(!this.expanded);
        event.stopPropagation();
      }
      this.searchEmitter.emit();
    }
  }
  
  public reset() {
    this.searchControl.setValue('');
  }
  
  get hidden(): boolean {
    return !this.expanded && !this.searchControl.value;
  }
  
  /** @deprecated all*/
  @Input()
  showSearch: boolean = true;
  @Input()
  control: AbstractControl;
  @Input()
  loading: boolean = false;
  @Input()
  selected: any;
  @Input()
  list: any = null;
  @Input()
  colorClass: string = 'portal-color';
  @Input()
  bordered: boolean = false;
  @Input()
  toggleTitle: string = 'search';
  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
  @Output()
  resetEmitter: EventEmitter<any> = new EventEmitter<any>();
  @Output()
  closeEmitter: EventEmitter<any> = new EventEmitter<any>();
  
  /** @deprecated*/
  closeSearch() {

  }
}