import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {AbstractControl} from '@angular/forms';
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';

@Component({
  selector: '[search-input]',
  styleUrls: ['search-input.component.css'],
  template: `
    <div class="uk-flex uk-flex-middle uk-flex-center search-mobile" [ngClass]="colorClass">
      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
        <form (ngSubmit)="search()">
          <input #input type="text" class="uk-width-1-1"
                 [class.uk-animation-slide-right-medium]="showSearch"
                 [class.uk-hidden@m]="!showSearch"
                 [class.uk-hidden]="selected"
                 [placeholder]="placeholder"
                 (blur)="closeSearch()"
                 [formControl]="control"
                 [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
            <mat-option *ngFor="let option of list | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </form>
        <div *ngIf="selected" class="uk-flex uk-flex-left selected">
          <span class="uk-flex uk-flex-middle">
            <span>{{selected}}</span>
            <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
              <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
                  fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
                <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
              </svg>
            </span>
          </span>
        </div>
      </div>
      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"
              (mousedown)="$event.preventDefault()" (click)="toggle()">
        <span [ngClass]="colorClass" class="icon-bg">
          <icon class="uk-position-center" name="search"></icon>
        </span>
        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
      </button>
      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
              (mousedown)="$event.preventDefault()" (click)="search()">
        <span [ngClass]="colorClass" class="icon-bg">
          <icon class="uk-position-center" name="search"></icon>
        </span>
        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
      </button>
    </div>`
})
export class SearchInputComponent {
  @Input()
  showSearch: boolean = true;
  @Input()
  control: AbstractControl;
  @Input()
  placeholder: string;
  @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('input') input: ElementRef;
  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
  @Output()
  searchEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output()
  resetEmitter: EventEmitter<any> = new EventEmitter<any>();
  
  toggle() {
    if(!this.selected) {
      this.showSearch = !this.showSearch;
      if (this.showSearch) {
        setTimeout(() => { // this will make the execution after the above boolean has changed
          this.input.nativeElement.focus();
        }, 0);
      }
    }
  }
  
  closeSearch() {
    this.showSearch = false;
  }
  
  public search(emit = true) {
    this.trigger.closePanel();
    this.searchEmitter.emit(emit);
  }
  
  public reset() {
    this.showSearch = true;
    setTimeout(() => {
      this.input.nativeElement.focus();
    }, 0);
  }
}