import { r as registerInstance, d as createEvent, h, e as getElement } from './index-7ec78587.js';
import { p as pdf } from './pdf-d424d590.js';
import './buffer-es6-c2f042fd.js';

const akordPdfViewerCss = "akord-pdf-viewer canvas{margin:0 auto;display:block;border-radius:4px}akord-pdf-viewer ion-card{transform:translate(-50%);left:50%}akord-pdf-viewer .pdf-canvas{margin:0;margin-bottom:6px;width:calc(100vw - 32px)}akord-pdf-viewer .pdf-viewer-container{width:100%}akord-pdf-viewer .pdf-controlls-container{display:flex;position:fixed;bottom:24px;left:45%;background:#2e2e2e;padding:10px 16px 7px;border-radius:4px;font-style:normal;color:#fff;font-style:normal !important}akord-pdf-viewer .pdf-context{transform:translateZ(0);width:100%;height:100%}akord-pdf-viewer .pdf-container{position:relative;overflow:scroll;width:100%;height:100%;background-color:#ddd}akord-pdf-viewer .pdf-zoom-buttons.active{opacity:1}akord-pdf-viewer .pdf-zoom-buttons{position:sticky;display:inline-block;bottom:5px;left:50%;background-color:rgba(60, 60, 60, 0.4);border-radius:10px;transform:translate(-50%, 0);transition:opacity ease-out 0.5s}";

// Works well with 2.12.313
pdf.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.version}/pdf.worker.min.js`;
let AkordPdfViewer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.pageRendered = createEvent(this, "pageRendered", 7);
    this.pdfZoom = 1;
    this.isDocumentLoading = false;
  }
  async componentWillLoad() {
    this.isDocumentLoading = true;
    // Refresh view while document is loading...
    this.pdfDocument = null;
    if (this.pdfDocumentLoader) {
      this.pdfDocumentLoader.cancel();
    }
    this.pdfDocumentLoader = pdf.getDocument(this.src);
    this.pdfDocument = await this.pdfDocumentLoader.promise;
    this.isDocumentLoading = false;
  }
  componentDidLoad() {
    const width = this.pdfContext.offsetWidth;
    const height = this.pdfContext.offsetHeight;
    this.pdfContext.setAttribute('style', `width: ${width}px`);
    this.pdfContext.style.width = `${width} px`;
    this.pdfContext.setAttribute('style', `height: ${height}px`);
    this.pdfContext.style.height = `${height} px`;
  }
  async updateSrc(newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }
    this.isDocumentLoading = true;
    // Refresh view while document is loading...
    this.pdfDocument = null;
    console.log("reload?");
    this.pdfDocument = await pdf.getDocument(newValue).promise;
    this.isDocumentLoading = false;
  }
  handleZoom(newZoom) {
    this.pdfZoom = newZoom;
  }
  handleMouseEnter() {
    var _a;
    (_a = this.btns) === null || _a === void 0 ? void 0 : _a.classList.add('active');
    clearTimeout(this.zoomButtonsHideTimeout);
  }
  handleMouseLeave() {
    this.zoomButtonsHideTimeout = setTimeout(() => { var _a; return (_a = this.btns) === null || _a === void 0 ? void 0 : _a.classList.remove('active'); }, 1000);
  }
  handleMouseMove() {
    this.handleMouseEnter();
    this.handleMouseLeave();
  }
  /** Page rotation in degrees */
  async renderPage(pageNum, canvas, rotation = 0) {
    const currentPage = await this.pdfDocument.getPage(pageNum);
    // Fit page on pdfContext width and then adjust zoom
    let viewport = currentPage.getViewport({ scale: 1, rotation });
    const scale = (this.pdfContext.offsetWidth - 50) / viewport.width; // margin for cards
    viewport = currentPage.getViewport({ scale: this.pdfZoom * scale, rotation });
    // Set canvas size
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    canvas.parentElement.setAttribute('style', `width:${canvas.width}px;height:${canvas.height}px`);
    canvas.parentElement.style.width = `${canvas.width}px`;
    canvas.parentElement.style.height = `${canvas.height}px`;
    // Render PDF page into canvas context
    const renderContext = {
      viewport,
      canvasContext: canvas.getContext('2d'),
    };
    // Wait for rendering to finish
    await currentPage.render(renderContext).promise;
    this.pageRendered.emit(pageNum);
  }
  renderPageCard(pageNum) {
    return h("ion-card", null, h("canvas", { key: pageNum, ref: r => this.renderPage(pageNum, r) }));
  }
  renderDocument() {
    if (this.pdfDocument && !this.isDocumentLoading) {
      return [...Array(this.pdfDocument.numPages).keys()].map(p => this.renderPageCard(p + 1));
    }
    return h("center", null, h("ion-spinner", { name: "dots" }));
  }
  renderButtons() {
    if (this.pdfDocument) {
      return h("ion-buttons", { ref: e => (this.btns = e), class: 'pdf-zoom-buttons active', onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("ion-button", { onClick: () => this.handleZoom(this.pdfZoom - 0.1) }, h("ion-icon", { slot: "icon-only", name: "remove-outline" })), h("ion-button", { onClick: () => this.handleZoom(1) }, h("ion-icon", { slot: "icon-only", name: "refresh" })), h("ion-button", { onClick: () => this.handleZoom(this.pdfZoom + 0.1) }, h("ion-icon", { slot: "icon-only", name: "add" })));
    }
    return null;
  }
  render() {
    return (h("div", { style: { height: this.height, display: 'block', textAlign: '-webkit-center' }, ref: e => (this.pdfContext = e), class: "pdf-context" }, h("div", { class: "pdf-container", onMouseMove: () => this.handleMouseMove() }, this.renderDocument()), this.renderButtons()));
  }
  get component() { return getElement(this); }
  static get watchers() { return {
    "src": ["updateSrc"]
  }; }
};
AkordPdfViewer.style = akordPdfViewerCss;

export { AkordPdfViewer as akord_pdf_viewer };
