'use strict';

var index = require('./index-B2lA-USD.js');
var jsSdk = require('@verdocs/js-sdk');
var utils = require('./utils-BXqLrKQZ.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('./index-CeUF44L9.js');
require('./Types-RUyU-svM.js');

const verdocsEnvelopeDocumentPageCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-document-page{width:100%;position:relative}verdocs-envelope-document-page .verdocs-envelope-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-envelope-document-page .verdocs-envelope-document-page-layer.img{width:100%}";

const VerdocsEnvelopeDocumentPage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pageRendered = index.createEvent(this, "pageRendered");
        /**
         * The endpoint to load from.
         */
        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
        /**
         * The ID of the envelope the document is for.
         */
        this.envelopeId = '';
        /**
         * The ID of the document to display.
         */
        this.documentId = '';
        /**
         * The page number being rendered. (Reminder: page numbers are 1-based.)
         */
        this.pageNumber = 1;
        /**
         * The "virtual" width of the page canvas. Defaults to 612 which at 72dpi is 8.5" wide. This is used to compute
         * the aspect ratio of the final rendered element when scaling up/down.
         */
        this.virtualWidth = 612;
        /**
         * The "virtual" height of the page canvas.  Defaults to 792 which at 72dpi is 11" tall. This is used to compute
         * the aspect ratio of the final rendered element when scaling up/down.
         */
        this.virtualHeight = 792;
        /**
         * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.
         * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.
         * if `pages` was ['page', 'fields'] the structure will be:
         *
         * ```
         *     <div id="verdocs-envelope-document-page-ker2fr1p9">
         *       <div id="verdocs-envelope-document-page-ker2fr1p9-page"></div>
         *       <div id="verdocs-envelope-document-page-ker2fr1p9-fields"></div>
         *     </div>
         * ```
         */
        this.layers = [{ name: 'page', type: 'canvas' }];
        this.type = 'original';
        this.containerId = `verdocs-envelope-document-page-${Math.random().toString(36).substring(2, 11)}`;
        this.renderedWidth = this.virtualWidth;
        this.renderedHeight = this.virtualHeight;
        this.naturalWidth = this.virtualWidth;
        this.naturalHeight = this.virtualHeight;
        this.aspectRatio = this.virtualWidth / this.virtualHeight;
        this.skipFirstNotification = true;
        this.pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';
    }
    async componentWillLoad() {
        this.pageDisplayUri = await jsSdk.getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);
    }
    componentDidLoad() {
        this.resizeObserver = new ResizeObserver(utils.throttle(entries => {
            for (const entry of entries) {
                const renderedWidth = entry.contentRect.width;
                this.renderedWidth = renderedWidth;
                this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
            }
            this.notifyRenderedSize();
        }, 100));
        this.resizeObserver.observe(this.container);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
    // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
    // componentDidRender() {
    //   this.notifyRenderedSize();
    // }
    notifyRenderedSize() {
        // We skip one notification because by default we will always get at least two, one when rendering the initial size
        // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
        if (this.skipFirstNotification) {
            this.skipFirstNotification = false;
            return;
        }
        this.pageRendered.emit({
            // container: this.container,
            containerId: this.containerId,
            documentId: this.documentId,
            pageNumber: this.pageNumber,
            virtualWidth: this.virtualWidth,
            virtualHeight: this.virtualHeight,
            renderedWidth: this.renderedWidth,
            renderedHeight: this.renderedHeight,
            naturalWidth: this.naturalWidth,
            naturalHeight: this.naturalHeight,
            aspectRatio: this.aspectRatio,
            xScale: this.renderedWidth / this.virtualWidth,
            yScale: this.renderedHeight / this.virtualHeight,
        });
    }
    render() {
        const height = `${this.renderedHeight}px`;
        return (index.h(index.Host, { key: '750f27fff50ae426a33898cd1abbc0c5e108421c', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
                // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
                // TODO: Store this in the DB with each page.
                this.naturalWidth = e.target.naturalWidth;
                this.naturalHeight = e.target.naturalHeight;
                this.aspectRatio = this.naturalWidth / this.naturalHeight;
                this.virtualHeight = this.virtualWidth / this.aspectRatio;
                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
            } })) : (index.h("div", null)))));
    }
    get container() { return index.getElement(this); }
};
VerdocsEnvelopeDocumentPage.style = verdocsEnvelopeDocumentPageCss;

exports.verdocs_envelope_document_page = VerdocsEnvelopeDocumentPage;
//# sourceMappingURL=verdocs-envelope-document-page.entry.cjs.js.map

//# sourceMappingURL=verdocs-envelope-document-page.cjs.entry.js.map