import { Component, ElementRef, OnChanges, AfterViewInit, Input, OnInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from "../../library/script-loader.service";
import { StyleLoaderService } from "../../library/style-loader.service";

declare const jQuery;
declare const pdfjsLib;
declare const printJS;

@Component({
  selector: 'rd-pdf-viewer',
  template: `
    <div class="row col-md-12">
      <div style="padding:5px;background:#2c3e50">
        <div><rd-button rd-size="small" rd-color="green" rd-icon="fas fa-plus" (rd-click)="zoom(true)" [rd-disabled]="!state.file"></rd-button></div>
        <div style="margin-bottom:2rem"><rd-button rd-size="small" rd-color="red" rd-icon="fas fa-minus" (rd-click)="zoom(false)" [rd-disabled]="!state.file"></rd-button></div>
        <div style="margin-bottom:2rem" *ngIf="exportURL">
          <rd-button rd-size="small" rd-color="blue" rd-icon="fas fa-file-pdf" [rd-tooltip]="'İndir' | translate" (rd-click)="window.open(exportURL)"></rd-button>
        </div>
        <rd-button rd-size="small" rd-color="purple" rd-icon="fas fa-print" [rd-tooltip]="'Yazdır' | translate" (rd-click)="print()"></rd-button>

        <div><rd-button rd-size="small" rd-color="blue" rd-icon="fas fa-chevron-circle-left" (rd-click)="gotoPage(-1)" [rd-disabled]="!state.file || state.currentPage == 1"></rd-button></div>
        <div style="margin:.5rem 0">
          <span class="m-type m--bg-warning" style="width:2.4rem;height:2.4rem">
            <span class="m--font-light">{{state.currentPage}}</span>
          </span>
        </div>
        <div><rd-button rd-size="small" rd-color="blue" rd-icon="fas fa-chevron-circle-right" (rd-click)="gotoPage(1)" [rd-disabled]="!state.file || state.currentPage == state.file?._pdfInfo.numPages"></rd-button></div>

      </div>
      <div class="col-md-11" style="padding-left:0">
        <canvas [attr.id]="id" style="border:1px dashed" [hidden]="!state.file"></canvas>
        <div class="m-stack m-stack--ver m-stack--general m-stack--demo" style="width:38rem;height:23rem;border:1px dashed" *ngIf="!state.file">
          <div class="m-stack__item m-stack__item--center m-stack__item--middle">
            <i class="far fa-file-pdf" style="font-size:xxx-large;margin-right:1rem"></i>
            <span style="font-size:xxx-large">{{placeholder}}</span>
          </div>
        </div>
      </div>
    </div>
  `
})
export class PDFViewer extends RdComponent implements OnInit, OnChanges, AfterViewInit {
  constructor(private element: ElementRef, private script: ScriptLoaderService, private style: StyleLoaderService) {
    super();
    this.loadScript();
    this.loadStyle();
  }

  @Input("rd-file") inputFile: string; // base64
  @Input("rd-url") url: string;
  @Input("rd-export-url") exportURL: string;
  @Input("rd-zoom") zoomLevel: number = 1;
  @Input("rd-placeholder") placeholder: string = "PDF Viewer";

  id: string = "pdf_canvas" + Math.random();
  canvas;
  state = {
    file: null,
    currentPage: 1,
    zoom: this.zoomLevel
  }

  ngOnInit() {
    if (this.zoomLevel) this.state.zoom = this.zoomLevel;
  }

  ngOnChanges() {
    if (this.inputFile || this.url) this.getDoc();
  }

  ngAfterViewInit() {
    this.canvas = jQuery(this.element.nativeElement).find("canvas")[0];
  }

  getDoc() {
    this.loadScript().then(() => {
      if (this.inputFile) {
        pdfjsLib.getDocument({ data: atob(this.inputFile) }).promise.then((pdf) => {
          this.state.file = pdf;
          this.render();
        });
      }
      else if (this.url) {
        pdfjsLib.getDocument(this.url).promise.then((pdf) => {
          this.state.file = pdf;
          this.render();
        });
      }
    })
  }

  render() {
    this.state.file.getPage(this.state.currentPage).then((page) => {

      let ctx = this.canvas.getContext('2d');
      let viewport = page.getViewport({ scale: this.state.zoom });

      this.canvas.width = viewport.width;
      this.canvas.height = viewport.height;

      page.render({
        canvasContext: ctx,
        viewport: viewport
      });
    });
  }

  gotoPage(page) {
    this.state.currentPage += page;
    this.render();
  }

  zoom(zoomIn) {
    zoomIn ? this.state.zoom += .1 : this.state.zoom -= .1;
    this.render();
  }

  loadScript(): Promise<any> {
    return this.script.load(["./assets/js/pdf.min.js", "./assets/js/print.min.js"]).then(() => {
      pdfjsLib.GlobalWorkerOptions.workerSrc = "./assets/js/pdf.worker.min.js";
    })
  }

  loadStyle() {
    this.style.load(['./assets/css/print.min.css']);
  }

  print() {
    this.loadScript().then(() => {
      printJS({ printable: this.inputFile, type: 'pdf', base64: true, showModal: true });
    })
  }
}