import { Host, h } from "@stencil/core";
import { ResizeController } from '../../utils/resize.controller';
/** @internal */
export class Scroller {
    constructor() {
        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 (h(Host, { class: { 'anj-overflow-x': this.overflowX } },
            h("div", { class: "anj-scroll-container", style: styles, ref: r => this.scrollPane = r },
                h("slot", null))));
    }
    static get is() { return "anj-scroller"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["scroller.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["scroller.css"]
    }; }
    static get properties() { return {
        "delay": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Time to debounce programmatic scrolling"
            },
            "attribute": "delay",
            "reflect": false,
            "defaultValue": "200"
        },
        "mode": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "VirtualScrollMode",
                "resolved": "\"none\" | \"vertical\"",
                "references": {
                    "VirtualScrollMode": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Enables virtual scroll\nPossible values are: `\"vertical\"`, and `\"none\"`. Default is \"none\""
            },
            "attribute": "mode",
            "reflect": false,
            "defaultValue": "'none'"
        },
        "page": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "page",
            "reflect": false
        },
        "range": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "RecordBounds",
                "resolved": "[number, number]",
                "references": {
                    "RecordBounds": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "size": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "size",
            "reflect": false
        },
        "total": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The total (known) number of records"
            },
            "attribute": "total",
            "reflect": false,
            "defaultValue": "1"
        }
    }; }
    static get states() { return {
        "height": {},
        "overflowX": {},
        "width": {}
    }; }
    static get methods() { return {
        "doResize": {
            "complexType": {
                "signature": "() => Promise<unknown>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<unknown>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "debouncedScrollTo": {
            "complexType": {
                "signature": "(x: number, y: number) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "total",
            "methodName": "onTotalChange"
        }]; }
}
