<script>
    (function () {

        function init() {

            $('[stag-popup-key="pdf-viewer"]').remove();
            $('body').append(
                '<div class="stag-popup stag-popup-md stag-popup-right mcp-theme-1" ' +
                'stag-popup-key="pdf-viewer" ' +
                'id="stagPdfViewer">' +
                '<form>' +
                '<h3 class="stag-popup-title">' +
                '<span>PDF Viewer</span>' +
                '<a href="#" class="ml-auto text-secondary" onclick="return closeStagPopup()">' +
                '<i class="fa fa-times-circle"></i>' +
                '</a>' +
                '</h3>' +
                '</form>' +
                '</div>'
            );

            new Vue({
                el: '#stagPdfViewer',
                data: {
                    loadedPDF: null,
                    page: 1,
                },
                methods: {
                    load: function (_url) {

                        this.loadedPDF = null;
                        this.numPages = 1;
                        this.page = 1;

                        $('#stagPdfViewer>form>canvas').remove();

                        let self = this;
                        let url = _url;
                        let pdfjsLib = window['pdfjs-dist/build/pdf'];
                        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
                        let loadingTask = pdfjsLib.getDocument(url);
                        // loadingTask.onProgress = function (progress) {
                        //     self.loadingPercentage = Math.round((progress.loaded / progress.total) * 100);
                        // };
                        loadingTask.promise.then(function (pdf) {
                            self.numPages = pdf.numPages;
                            self.loadedPDF = pdf;
                            self.page = 1;
                            self.render();
                        }, function (reason) {
                            // self.pdfNotFound = reason.message;
                        });
                    },
                    render: function () {
                        let self = this;

                        self.loadedPDF.getPage(self.page).then(function (page) {

                            // create canvas
                            let canvasElement = $('<canvas/>')
                                .addClass('pdf-viewer-page')
                                .appendTo('#stagPdfViewer>form');

                            let canvas = canvasElement[0];
                            let viewport = page.getViewport({scale: 1.25});
                            let context = canvas.getContext('2d');
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;
                            const $canvas = $(canvas);
                            let renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            let renderTask = page.render(renderContext);
                            renderTask.promise.then(function () {
                                if(self.page < self.numPages) {
                                    self.page++;
                                    self.render();
                                }
                            });
                        });
                    },
                },
                mounted: function () {
                    let self = this;
                    $(document)
                        .off('click.pdf-viewer', '.pdf-viewer-trigger')
                        .on('click.pdf-viewer', '.pdf-viewer-trigger', function () {
                            self.load(this.href);
                            showStagPopup('pdf-viewer');
                            return false;
                        });
                }
            })
        }

        addMCInitializer('inline-pdf-viewer', init);
    })();
</script>
