import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { ModalService, ButtonComponent } from '@libs/ui';
import { RemissionService, Printer } from '@isa/remission';

@Component({
  selector: 'app-remission-printer-selection',
  templateUrl: './remission-printer-selection.component.html',
  styleUrls: ['./remission-printer-selection.component.scss'],
})
export class RemissionPrinterSelectionComponent implements OnInit, OnDestroy {
  id = 'remission-printer-modal';
  options: string[] | number[];
  selected: string | number;
  selectedPrinterValue: string;
  printers: { key: string; text: string; selected: boolean }[] = [];
  destroy$ = new Subject();
  error = false;
  errorMessage = '';
  loaded = false;
  printingRequested = false;
  submited = false;
  @Output() print: EventEmitter<string> = new EventEmitter();
  @ViewChild('printBtn') printBtn: ButtonComponent;

  constructor(private remissionService: RemissionService, private modalService: ModalService) {}

  ngOnInit() {}

  printerSelected(value: string | number) {
    this.selected = value;
    this.selectedPrinterValue = this.printers.find((t) => t.text === this.selected).key;
  }

  emitPrint() {
    if (this.loaded) {
      this.print.emit(this.selectedPrinterValue);
      this.printBtn.startLoading();
    } else {
      this.printingRequested = true;
      this.printBtn.startLoading();
    }
  }

  loadPrinters() {
    this.loaded = false;
    this.error = false;
    this.remissionService
      .getPrinters()
      .pipe(takeUntil(this.destroy$))
      .subscribe((response: Printer[]) => {
        const result = response as Printer[];
        this.printers = result.map((t) => {
          return { key: t.key, text: t.description, selected: t.selected };
        });
        const selectedPrinter = this.printers.find((printer) => printer.selected);
        this.options = this.printers.map((t) => t.text);
        this.selectedPrinterValue = selectedPrinter ? selectedPrinter.key : this.printers[0].key;
        this.selected = selectedPrinter ? selectedPrinter.text : this.options[0];
        this.error = false;
        this.loaded = true;
        if (this.printBtn) {
          this.printBtn.stopLoading();
        }
        if (!this.selected) {
          this.error = true;
          this.errorMessage = 'No available printers';
        }
      });
  }

  openDialog() {
    this.loadPrinters();
    this.modalService.open(this.id);
  }

  closeModal() {
    this.modalService.close(this.id);
    if (this.printBtn) {
      this.printBtn.stopLoading();
    }
  }

  setError(errorMessage?: string) {
    this.error = true;
    if (!!errorMessage) {
      this.errorMessage = errorMessage;
    }
  }

  ngOnDestroy() {
    if (this.printBtn) {
      this.printBtn.stopLoading();
    }
    this.destroy$.next();
  }

  contentLoaded() {
    if (this.printingRequested) {
      this.print.emit(this.selectedPrinterValue);
    }
  }
}
