import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  AfterViewInit,
  ViewChild,
  ElementRef,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
  AfterViewChecked,
} from '@angular/core';
import { ButtonComponent } from '../button';

@Component({
  selector: 'app-delete-dropdown',
  templateUrl: './delete-dropdown.component.html',
  styleUrls: ['./delete-dropdown.component.scss'],
})
export class DeleteDropdownComponent implements AfterViewInit, AfterViewChecked, OnInit {
  @Input() options: number[];
  @Input() selected: number;
  @Input() deactivateTenPlus = false;
  @Input() notUpdatable = false;
  @Input() simplified = false;
  @Input() mode = 'customer';
  @Output() valueChanges: EventEmitter<number> = new EventEmitter();
  @Output() delete: EventEmitter<boolean> = new EventEmitter();
  @Output() switch: EventEmitter<boolean> = new EventEmitter();
  @ViewChild('customInput') customInput: ElementRef;
  @ViewChild('changeButton') changeButton: ButtonComponent;
  shouldFocus = false;
  timer: any;

  @Input() ddload = false;
  ddloading = false;

  _load = false;
  @Input() set load(shouldLoad: boolean) {
    this._load = shouldLoad;
    if (!shouldLoad && this.changeButton) {
      this.changeButton.stopLoading();
    } else if (shouldLoad && this.changeButton) {
      this.changeButton.startLoading();
    }
  }

  get load() {
    return this._load;
  }

  isOpen = false;
  inputValue: number;
  showInput = false;

  constructor(private cdrf: ChangeDetectorRef) {}

  onChange(option: number) {
    if (option === -1) {
      this.showInput = true;
      this.inputValue = null;
      this.shouldFocus = true;
      this.cdrf.detectChanges();
      return;
    }

    if (this.ddload) {
      this.ddloading = true;
    }

    this.valueChanges.emit(option);
    this.toggleDropdown();
  }

  public stopLoading() {
    this.ddloading = false;
  }

  public startLoading() {
    if (this.ddload) {
      this.ddloading = true;
    }
  }

  setInputValue(val: number) {
    this.inputValue = val;
  }

  deleteItems() {
    this.delete.emit(true);
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }

  validateInput() {
    if (this.inputValue === undefined || this.inputValue === null) {
      this.inputValue = this.selected;
    } else if (this.inputValue === 0) {
      this.delete.emit(true);
      return;
    }
    if (this.ddload) {
      this.ddloading = true;
    }
    this.showInput = false;
    this.valueChanges.emit(this.inputValue);
    this.toggleDropdown();
  }

  inputValueChange(value) {
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      this.inputValue = value;
      this.valueChanges.emit(this.inputValue);
    }, 1000);
  }

  ngOnInit() {
    const hasPlusTenOption = this.options.findIndex((t) => t === -1) !== -1;
    if (hasPlusTenOption === false && !this.deactivateTenPlus && !this.notUpdatable) {
      this.options.push(-1);
    }
  }

  onSwitch() {
    this.switch.emit(true);
  }

  ngAfterViewInit(): void {
    if (this.selected > 4) {
      const el = this.selected - 1;
      const element = document.getElementById(el.toString());
      if (element) {
        element.scrollIntoView();
      }
    }
  }

  ngAfterViewChecked() {
    if (this.shouldFocus) {
      this.customInput.nativeElement.focus();
      this.shouldFocus = false;
    }
  }
}
