/* eslint-disable @typescript-eslint/no-inferrable-types */
/* eslint-disable import/prefer-default-export */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h } from "@stencil/core";
import pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
import { isValidUrl } from '../../utils/utils';
export class Viewer {
    constructor() {
        this.canvasWidth = 500;
        this.url = '';
        this.currentPage = 1;
        this.error = undefined;
        this.loadingTask = undefined;
        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
        this.loadingTask = pdfjsLib.getDocument(this.url);
    }
    // Listen to the active page event emited in the toolbar component
    setActivePage(event) {
        this.currentPage = event.detail;
    }
    renderPage() {
        this.loadingTask.promise
            .then(doc => {
            this.totalPages = doc.numPages;
            doc.getPage(this.currentPage).then(page => {
                let viewport = page.getViewport({ scale: 1 });
                const desiredScale = this.canvasWidth / viewport.width;
                viewport = page.getViewport({ scale: desiredScale, });
                const canvas = this.element.querySelector('#tt-pdf-widget');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = this.canvasWidth || viewport.width;
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        })
            .catch(e => {
            this.error = e;
        });
    }
    componentDidLoad() {
        this.renderPage();
    }
    componentWillUpdate() {
        this.renderPage();
    }
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    render() {
        if (!isValidUrl(this.url)) {
            return (h("error-message", { message: `Error: invalid URL ${this.url}` }));
        }
        if (this.error) {
            return (h("error-message", { message: this.error.message }));
        }
        return (h("div", { class: 'pdf-viewer background' },
            h("pdf-toolbar", { currentPage: this.currentPage, totalPages: this.totalPages, url: this.url }),
            h("canvas", { id: 'tt-pdf-widget' })));
    }
    static get is() { return "pdf-viewer"; }
    static get originalStyleUrls() { return {
        "$": ["viewer.css"]
    }; }
    static get styleUrls() { return {
        "$": ["viewer.css"]
    }; }
    static get properties() { return {
        "canvasWidth": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "canvas-width",
            "reflect": false,
            "defaultValue": "500"
        },
        "url": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "url",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get states() { return {
        "currentPage": {},
        "totalPages": {},
        "error": {}
    }; }
    static get elementRef() { return "element"; }
    static get listeners() { return [{
            "name": "activePageEvent",
            "method": "setActivePage",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
