import { h } from "@stencil/core";
/**
 * Scrollbar 滚动条组件
 * 用于替换浏览器原生滚动条
 */
export class Scrollbar {
    el;
    /**
     * 滚动条高度
     */
    height;
    /**
     * 滚动条最大高度
     */
    maxHeight;
    /**
     * 是否总是显示滚动条
     * @default false
     */
    always = false;
    /**
     * 是否显示原生滚动条
     * @default false
     */
    native = false;
    /**
     * 滚动条的最小尺寸
     * @default 20
     */
    minSize = 20;
    /**
     * 滚动事件
     */
    hbScroll;
    scrollbarVisible = false;
    thumbHeight = 0;
    thumbTop = 0;
    wrapRef;
    thumbRef;
    resizeObserver;
    isDragging = false;
    startY = 0;
    startScrollTop = 0;
    componentDidLoad() {
        if (!this.native) {
            this.initScrollbar();
        }
    }
    disconnectedCallback() {
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
        this.removeEventListeners();
    }
    handleSizeChange() {
        this.updateScrollbar();
    }
    /**
     * 设置滚动条位置
     */
    async setScrollTop(top) {
        if (this.wrapRef) {
            this.wrapRef.scrollTop = top;
            this.updateScrollbar();
        }
    }
    /**
     * 设置滚动条位置
     */
    async setScrollLeft(left) {
        if (this.wrapRef) {
            this.wrapRef.scrollLeft = left;
            this.updateScrollbar();
        }
    }
    /**
     * 获取滚动条位置
     */
    async getScrollTop() {
        return this.wrapRef?.scrollTop || 0;
    }
    /**
     * 获取滚动条位置
     */
    async getScrollLeft() {
        return this.wrapRef?.scrollLeft || 0;
    }
    initScrollbar() {
        if (!this.wrapRef)
            return;
        this.resizeObserver = new ResizeObserver(() => {
            this.updateScrollbar();
        });
        this.resizeObserver.observe(this.wrapRef);
        this.addEventListeners();
        this.updateScrollbar();
    }
    addEventListeners() {
        if (this.wrapRef) {
            this.wrapRef.addEventListener('scroll', this.handleScroll);
        }
        if (this.thumbRef) {
            this.thumbRef.addEventListener('mousedown', this.handleThumbMouseDown);
        }
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    }
    removeEventListeners() {
        if (this.wrapRef) {
            this.wrapRef.removeEventListener('scroll', this.handleScroll);
        }
        if (this.thumbRef) {
            this.thumbRef.removeEventListener('mousedown', this.handleThumbMouseDown);
        }
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    }
    updateScrollbar() {
        if (!this.wrapRef)
            return;
        const wrapHeight = this.wrapRef.clientHeight;
        const scrollHeight = this.wrapRef.scrollHeight;
        const scrollTop = this.wrapRef.scrollTop;
        const hasScroll = scrollHeight > wrapHeight;
        this.scrollbarVisible = hasScroll || this.always;
        if (hasScroll && this.thumbRef) {
            const thumbHeight = Math.max(this.minSize, (wrapHeight / scrollHeight) * wrapHeight);
            const maxThumbTop = wrapHeight - thumbHeight;
            const thumbTop = (scrollTop / (scrollHeight - wrapHeight)) * maxThumbTop;
            this.thumbHeight = thumbHeight;
            this.thumbTop = Math.max(0, Math.min(maxThumbTop, thumbTop));
        }
    }
    handleScroll = () => {
        this.updateScrollbar();
        if (this.wrapRef) {
            this.hbScroll.emit({
                scrollTop: this.wrapRef.scrollTop,
                scrollLeft: this.wrapRef.scrollLeft,
            });
        }
    };
    handleThumbMouseDown = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.isDragging = true;
        this.startY = e.clientY;
        this.startScrollTop = this.wrapRef?.scrollTop || 0;
    };
    handleMouseMove = (e) => {
        if (!this.isDragging || !this.wrapRef)
            return;
        const deltaY = e.clientY - this.startY;
        const wrapHeight = this.wrapRef.clientHeight;
        const scrollHeight = this.wrapRef.scrollHeight;
        const maxScrollTop = scrollHeight - wrapHeight;
        const thumbHeight = this.thumbHeight;
        const maxThumbTop = wrapHeight - thumbHeight;
        const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;
        const newScrollTop = Math.max(0, Math.min(maxScrollTop, this.startScrollTop + scrollDelta));
        this.wrapRef.scrollTop = newScrollTop;
    };
    handleMouseUp = () => {
        this.isDragging = false;
    };
    render() {
        const style = {};
        if (this.height) {
            style.height = this.height;
        }
        if (this.maxHeight) {
            style.maxHeight = this.maxHeight;
        }
        if (this.native) {
            return (h("div", { class: "hb-scrollbar hb-scrollbar--native", style: style }, h("div", { class: "hb-scrollbar__wrap" }, h("div", { class: "hb-scrollbar__view" }, h("slot", null)))));
        }
        return (h("div", { class: "hb-scrollbar", style: style }, h("div", { class: "hb-scrollbar__wrap", ref: (el) => (this.wrapRef = el), onScroll: this.handleScroll }, h("div", { class: "hb-scrollbar__view" }, h("slot", null))), this.scrollbarVisible && !this.native && (h("div", { class: "hb-scrollbar__bar hb-scrollbar__bar--vertical" }, h("div", { class: "hb-scrollbar__thumb", ref: (el) => {
                this.thumbRef = el;
                if (el && !this.native) {
                    el.addEventListener('mousedown', this.handleThumbMouseDown);
                }
            }, style: {
                height: `${this.thumbHeight}px`,
                transform: `translateY(${this.thumbTop}px)`,
            } })))));
    }
    static get is() { return "hb-scrollbar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["scrollbar.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["scrollbar.css"]
        };
    }
    static get properties() {
        return {
            "height": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6EDA\u52A8\u6761\u9AD8\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false
            },
            "maxHeight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6EDA\u52A8\u6761\u6700\u5927\u9AD8\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "max-height",
                "reflect": false
            },
            "always": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u603B\u662F\u663E\u793A\u6EDA\u52A8\u6761"
                },
                "getter": false,
                "setter": false,
                "attribute": "always",
                "reflect": false,
                "defaultValue": "false"
            },
            "native": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u539F\u751F\u6EDA\u52A8\u6761"
                },
                "getter": false,
                "setter": false,
                "attribute": "native",
                "reflect": false,
                "defaultValue": "false"
            },
            "minSize": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "20"
                        }],
                    "text": "\u6EDA\u52A8\u6761\u7684\u6700\u5C0F\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "min-size",
                "reflect": false,
                "defaultValue": "20"
            }
        };
    }
    static get states() {
        return {
            "scrollbarVisible": {},
            "thumbHeight": {},
            "thumbTop": {}
        };
    }
    static get events() {
        return [{
                "method": "hbScroll",
                "name": "hbScroll",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6EDA\u52A8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "{ scrollTop: number; scrollLeft: number }",
                    "resolved": "{ scrollTop: number; scrollLeft: number; }",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setScrollTop": {
                "complexType": {
                    "signature": "(top: number) => Promise<void>",
                    "parameters": [{
                            "name": "top",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "\u8BBE\u7F6E\u6EDA\u52A8\u6761\u4F4D\u7F6E",
                    "tags": []
                }
            },
            "setScrollLeft": {
                "complexType": {
                    "signature": "(left: number) => Promise<void>",
                    "parameters": [{
                            "name": "left",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "\u8BBE\u7F6E\u6EDA\u52A8\u6761\u4F4D\u7F6E",
                    "tags": []
                }
            },
            "getScrollTop": {
                "complexType": {
                    "signature": "() => Promise<number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<number>"
                },
                "docs": {
                    "text": "\u83B7\u53D6\u6EDA\u52A8\u6761\u4F4D\u7F6E",
                    "tags": []
                }
            },
            "getScrollLeft": {
                "complexType": {
                    "signature": "() => Promise<number>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<number>"
                },
                "docs": {
                    "text": "\u83B7\u53D6\u6EDA\u52A8\u6761\u4F4D\u7F6E",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "height",
                "methodName": "handleSizeChange"
            }, {
                "propName": "maxHeight",
                "methodName": "handleSizeChange"
            }];
    }
}
//# sourceMappingURL=Scrollbar.js.map
