import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { combineLatest } from 'rxjs/observable/combineLatest';
import { filter } from 'rxjs/operators';
import { Template } from '../../models/template.model';
import { TemplatesFilterPipe } from '../../pipes';
import { TemplateService } from '../../services';
import { AppState } from '../../stores/app-state.store';
import { AutoCompleteVm } from './auto-complete-vm.model';

@Component({
  selector: 'app-auto-complete',
  templateUrl: './auto-complete.component.html',
  styleUrls: ['./auto-complete.component.css']
})
export class AutoCompleteComponent implements OnInit, OnChanges {
  @Output() create = new EventEmitter();
  @Output() pay = new EventEmitter();
  @Output() payAgain = new EventEmitter();
  @Output() update = Template;
  @Input() defaultTemplateId: string;
  @ViewChild('toWho') towho;
  @ViewChild('userFormToWho') autocompleteform;
  @ViewChild('recipientsLookupCtn') recipientslookupctn;
  isLoading = false;
  payToName = '';
  filterValue: string;
  model = new AutoCompleteVm();
  isLookUp = false;
  loadingMoreRecipients = false;
  index = -1;
  isNewSelected = true;
  hideError = true;
  templateFilter = new TemplatesFilterPipe();
  subscription: Subscription;

  constructor(
    private templateService: TemplateService,
    private app: AppState,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.isLoading = true;
    this.subscription = combineLatest(this.route.params, this.templateService.templates$)
      .pipe(
        filter(
          ([params, templates]) =>
            params !== null && params !== undefined && templates !== null && templates !== undefined
        )
      )
      .subscribe(([params, templates]) => {
        const selectedTemplateId = params['id'];
        if (!templates) {
          return;
        }
        this.model.setTemplates(templates);
        this.model.selectedTemplate = templates
          .filter(t => t.id === selectedTemplateId)
          .reduce((p, c) => c, null);

        this.isLoading = false;
        if (!this.model.selectedTemplate) {
          return;
        }
        this.showAgainPayment(this.model.selectedTemplate);
      });

    console.log('app-auto-complete content loaded');
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['defaultTemplateId']) {
      const id = changes['defaultTemplateId'].currentValue;
      if (id) {
        this.model.selectedId = id;
      }
    }
  }

  showNewPayment() {
    const template = this.app.template ? this.app.template : new Template();
    template.name = this.payToName;
    this.app.template = template;
    this.pay.emit();
    this.isLookUp = false;
    this.hideError = this.payToName.length < 2 ? false : true;
    if (!this.hideError) {
      return;
    }
  }

  showAgainPayment(template: Template) {
    if (!template.id) {
      return;
    }

    this.app.template = template;
    this.payToName = template.name;
    this.payAgain.emit(template);
    this.isLookUp = false;
  }

  showLookUp() {
    this.isLookUp = true;
  }

  hideLookUp() {
    setTimeout(() => {
      this.isLookUp = false;
      if (!this.app.template) {
        return this.showNewPayment();
      }
    }, 200);
  }

  resetAutoCompleteForm() {
    this.autocompleteform.reset();
  }

  isToWhoNotValid() {
    return this.towho.valid || this.towho.pristine || (this.towho.untouched && this.towho.invalid);
  }

  selectedPayment() {
    if (this.isNewSelected) {
      this.showNewPayment();
      return;
    }
    const template = this.model.templates[this.index];
    if (template !== null && template !== undefined) {
      this.showAgainPayment(template);
    }
  }

  move(delta: number) {
    const templates = this.templateFilter.transform(this.model.templates, this.payToName);
    const lastIndex = templates.length - 1;

    this.index = this.index + delta;
    // check for leftmost array boundry
    // if beyond the boundry loop index to the end of the array
    this.index = this.index < -1 ? lastIndex : this.index;
    // check for rightmost array boundry
    // if beyond the boundry loop the index to the start of the array
    this.index = this.index === templates.length ? -1 : this.index;

    if (this.index === -1 && delta === -1) {
      // moving up with the keyboard key
      this.isNewSelected = true;
      if (lastIndex >= 0) {
        templates[this.index - delta].selected = false;
      }
    } else if (this.index === -1 && delta === 1) {
      // loop forward to the item on the list from the bottom using (downArrow key)
      this.isNewSelected = true;
      if (lastIndex >= 0) {
        templates[lastIndex].selected = false;
      }
      this.recipientslookupctn.nativeElement.scrollTop = 0; // controll scrollUp navigation
    } else if (this.index === lastIndex && delta === -1) {
      // loop back to the last index(item on the list) using (upArrow key)
      this.isNewSelected = false;
      templates[this.index].selected = true;
      this.recipientslookupctn.nativeElement.scrollTop += 9999999; // controll scrollDown navigation
    } else if (this.index === 0 && delta === 1) {
      // moving down with the keyboard key
      this.isNewSelected = false;
      templates[this.index].selected = true;
    } else if (this.index === -2) {
      this.isNewSelected = false;
      templates[lastIndex].selected = true;
    } else {
      // using the filtering  while using the up and down controls
      templates[this.index - delta].selected = false;
      templates[this.index].selected = true; // highlights templates unto movement
    }
  }

  scrollDown() {
    this.recipientslookupctn.nativeElement.scrollTop += 45;
  }

  scrollUp() {
    this.recipientslookupctn.nativeElement.scrollTop += -45;
  }

  payToNameChanged(value: string) {
    // clearing the index to allow filtering while using the movement controls
    this.model.templates.forEach(template => {
      // resets the hover state upon filtering or index change
      template.selected = false;
    });
    this.isNewSelected = true;
    this.payToName = value;
    this.index = -1;
    this.app.template = null;
  }
}