'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-859ae5a6.js');
const utils = require('./utils-2a7c8f6e.js');

const transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height'];
class ResizeController {
    constructor(element, cb, wait) {
        this.element = element;
        this.cb = cb;
        this.supported = typeof ResizeObserver !== 'undefined';
        this.onTransitionEnd = this.onTransitionEnd.bind(this);
        if (utils.debounce) {
            this.cb = utils.debounce(this.cb, wait);
        }
    }
    connect() {
        if (this.supported) {
            this.resizeObserver = new ResizeObserver(() => {
                this.cb();
            });
            this.resizeObserver.observe(this.element);
        }
        else {
            window.addEventListener('resize', this.cb);
            document.addEventListener('transitionend', this.onTransitionEnd);
        }
    }
    disconnect() {
        if (!this.supported) {
            window.removeEventListener('resize', this.cb);
            document.removeEventListener('transitionend', this.onTransitionEnd);
        }
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = undefined;
        }
    }
    onDidRender() {
        if (!this.supported) {
            this.cb();
        }
    }
    onTransitionEnd({ propertyName }) {
        if (transitionKeys.includes(propertyName)) {
            this.cb();
        }
    }
}

const Scroller = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.scrollListener = (e) => this.onScroll(e);
        this.overflowX = false;
        /**
         * Time to debounce programmatic scrolling
         */
        this.delay = 200;
        /**
         * Enables virtual scroll
         * Possible values are: `"vertical"`, and `"none"`. Default is "none"
         */
        this.mode = 'none';
        /**
         * The total (known) number of records
         */
        this.total = 1;
    }
    onTotalChange() {
        this.calculateHeight();
    }
    connectedCallback() {
        this.calculateHeight();
        this.resizer = new ResizeController(this.element, this.onResize.bind(this), 50);
        this.resizer.connect();
        if (this.mode !== 'none') {
            this.element.addEventListener('scroll', this.scrollListener);
        }
    }
    componentDidRender() {
        // Call resize on render
        this.resizer.onDidRender();
    }
    disconnectedCallback() {
        window.clearTimeout(this.scrollTimer);
        window.clearTimeout(this.resizeTimer);
        if (this.mode !== 'none') {
            this.element.removeEventListener('scroll', this.scrollListener);
        }
        this.resizer.disconnect();
        this.resizer = undefined;
    }
    onResize() {
        // TODO: make generic
        const table = this.element.querySelector('.anj-table');
        if (this.element.parentElement.offsetWidth) {
            this.width = this.element.parentElement.offsetWidth;
            this.overflowX = (table && table.offsetWidth > this.width);
        }
    }
    doResize() {
        window.clearTimeout(this.resizeTimer);
        return new Promise(resolve => {
            this.scrollTimer = window.setTimeout(() => {
                this.onResize();
                resolve();
            }, this.delay);
        });
    }
    debouncedScrollTo(x, y) {
        window.clearTimeout(this.scrollTimer);
        return new Promise(resolve => {
            this.scrollTimer = window.setTimeout(() => {
                if (x !== undefined) {
                    this.element.scrollLeft = x;
                }
                if (y !== undefined) {
                    this.element.scrollTop = y;
                }
                resolve();
            }, this.delay);
        });
    }
    calculateHeight() {
        if (this.mode === 'none') {
            return;
        }
        console.log(this.total);
        this.height = this.total * 49;
        this.calculateRange();
    }
    calculateRange() {
        this.range = [0, 10];
    }
    onScroll(e) {
        // try setting padding on scroll pane?
        console.log(e, this.scrollPane);
    }
    render() {
        const styles = {};
        if (this.height) {
            styles['height'] = `${this.height}px`;
        }
        return (core.h(core.Host, { class: { 'anj-overflow-x': this.overflowX } }, core.h("div", { class: "anj-scroll-container", style: styles, ref: r => this.scrollPane = r }, core.h("slot", null))));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "total": ["onTotalChange"]
    }; }
    static get style() { return ".sc-anj-scroller-h {\n  background-color: inherit;\n  display: block;\n  max-height: 100%;\n  overflow: auto;\n  scroll-behavior: smooth;\n}\n.sc-anj-scroller-h .anj-scroll-container.sc-anj-scroller {\n  background-color: inherit;\n}"; }
};

exports.anj_scroller = Scroller;
