import { Component } from '@angular/core';

import type { PdfChangeEvent } from '@delon/abc/pdf';

@Component({
  selector: 'components-pdf-basic',
  template: `
    <button nz-button nzType="primary" (click)="src = src === one ? two : one">Change File</button>
    <pdf [src]="src" style="height: 300px" (change)="handle($event)"></pdf>
  `
})
export class ComponentsPdfBasicComponent {
  one = `https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf`;
  two = `https://raw.githubusercontent.com/mozilla/pdf.js/master/examples/learning/helloworld.pdf`;
  src = this.one;

  handle(ev: PdfChangeEvent): void {
    console.log(ev);
  }
}

import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';

import { PdfChangeEvent, PdfComponent, PdfZoomScale } from '@delon/abc/pdf';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzUploadFile } from 'ng-zorro-antd/upload';

@Component({
  selector: 'components-pdf-design',
  template: `
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="8">
        <div se-container col="1">
          <se label="Url of the pdf file (Press enter to run)">
            <input #url nz-input [ngModel]="src" (keyup.enter)="uploadSrc(url.value)" />
          </se>
          <se label="Local of the pdf file">
            <nz-upload nzAccept=".pdf" [nzBeforeUpload]="beforeUpload">
              <button nz-button><i nz-icon nzType="upload"></i>Select File</button>
            </nz-upload>
          </se>
          <se label="Render Text">
            <nz-switch [(ngModel)]="renderText"></nz-switch>
          </se>
          <se label="Original size">
            <nz-switch [(ngModel)]="originalSize"></nz-switch>
          </se>
          <se *ngIf="originalSize" label="Fit to page">
            <nz-switch [(ngModel)]="fitToPage"></nz-switch>
          </se>
          <se label="Auto size">
            <nz-switch [(ngModel)]="autoReSize"></nz-switch>
          </se>
          <se label="Show All Pages">
            <nz-switch [(ngModel)]="showAll" (ngModelChange)="changeShowAllPages($event)"></nz-switch>
          </se>
          <se *ngIf="!originalSize" label="Zoom Scale">
            <nz-select [(ngModel)]="zoomScale">
              <nz-option nzValue="page-height" nzLabel="Page Height"></nz-option>
              <nz-option nzValue="page-fit" nzLabel="Page Fit"></nz-option>
              <nz-option nzValue="page-width" nzLabel="Page Width"></nz-option>
            </nz-select>
          </se>
          <se label="Zoom">
            <nz-input-number [(ngModel)]="zoom" [nzStep]="0.1"></nz-input-number>
          </se>
          <se *ngIf="showAll" label="Stick to page ">
            <nz-switch [(ngModel)]="stickToPage"></nz-switch>
          </se>
          <se *ngIf="stickToPage" label="Page">
            <nz-pagination [(nzPageIndex)]="pi" [nzPageSize]="1" [nzTotal]="total" nzSimple></nz-pagination>
          </se>
          <se label="Rotation">
            <nz-input-number [(ngModel)]="rotation" [nzStep]="90"></nz-input-number>
          </se>
          <se label="Outline">
            <nz-switch [(ngModel)]="outline"></nz-switch>
          </se>
          <se *ngIf="outline" [label]="null">
            <nz-empty *ngIf="outlineList === null"></nz-empty>
            <ng-template #outlineTpl let-ls let-level="level">
              <li *ngFor="let i of ls" [style.paddingLeft.px]="level * 16">
                <a (click)="navigateTo(i.dest)">{{ i.title }}</a>
                <ul *ngIf="i.items && i.items.length > 0">
                  <ng-container
                    *ngTemplateOutlet="outlineTpl; context: { $implicit: i.items, level: level + 1 }"
                  ></ng-container>
                </ul>
              </li>
            </ng-template>
            <ul *ngIf="outlineList">
              <ng-container
                *ngTemplateOutlet="outlineTpl; context: { $implicit: outlineList, level: 0 }"
              ></ng-container>
            </ul>
          </se>
          <se label="Search pdf">
            <input
              #qIpt
              nz-input
              placeholder="Search..."
              (input)="search$.next(qIpt.value)"
              (keyup.enter)="search$.next(qIpt.value)"
            />
          </se>
        </div>
      </div>
      <div nz-col nzSpan="16" style="background-color: #fafafa; padding: 32px 0;">
        <pdf
          #pdf
          [src]="src"
          [pi]="pi"
          [renderText]="renderText"
          [showAll]="showAll"
          [originalSize]="originalSize"
          [fitToPage]="fitToPage"
          [stickToPage]="stickToPage"
          [zoomScale]="zoomScale"
          [zoom]="zoom"
          [rotation]="rotation"
          [autoReSize]="autoReSize"
          (change)="change($event)"
          style="height: 600px"
        ></pdf>
      </div>
    </div>
  `
})
export class ComponentsPdfDesignComponent implements OnInit {
  @ViewChild('pdf') private comp!: PdfComponent;
  src = `https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf`;
  pi = 1;
  total = 0;
  renderText = true;
  stickToPage = true;
  originalSize = true;
  fitToPage = false;
  showAll = true;
  zoomScale: PdfZoomScale = 'page-width';
  rotation = 0;
  zoom = 1;
  autoReSize = true;
  outline = false;
  outlineList: NzSafeAny = null;
  q = '';
  search$ = new Subject<string>();

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.search$.subscribe((q: string) => {
      if (q !== this.q) {
        this.q = q;
        this.comp.eventBus?.dispatch('find', {
          query: this.q,
          highlightAll: true
        });
      } else {
        this.comp.eventBus?.dispatch('findagain', {
          query: this.q,
          highlightAll: true
        });
      }
    });
  }

  change(ev: PdfChangeEvent): void {
    switch (ev.type) {
      case 'loaded':
        this.total = ev.total!;
        this.loadOutline();
        break;
      case 'pi':
        this.pi = ev.pi!;
        break;
    }

    if (ev.type !== 'load-progress') console.log(ev);
  }

  uploadSrc(src: string): void {
    this.src = src;
  }

  changeShowAllPages(_val: boolean): void {
    this.stickToPage = true;
  }

  beforeUpload = (file: NzUploadFile): boolean => {
    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      this.src = e.target!.result as string;
      this.cdr.detectChanges();
    };
    reader.readAsArrayBuffer(file as unknown as Blob);
    return false;
  };

  loadOutline(): void {
    this.comp.pdf?.getOutline().then(outline => {
      this.outlineList = outline;
    });
  }

  navigateTo(dest: string): void {
    this.comp.linkService?.goToDestination(dest);
  }
}