import { h } from "@stencil/core";
/**
 * Carousel 走马灯组件
 * 在有限空间内循环播放同一类型的图片、文字等内容
 */
export class Carousel {
    el;
    /** 当前幻灯片索引（受控，可双向） */
    current = 0;
    /** 是否自动切换 */
    autoplay = false;
    /** 自动切换间隔（毫秒） */
    interval = 3000;
    /** 切换箭头展示时机 */
    arrow = 'hover';
    /** 是否显示指示点 */
    dots = true;
    /** 是否循环播放 */
    loop = true;
    /** 当前索引变化事件，detail 为新索引 */
    hbChange;
    /** slot 投影的幻灯片数量 */
    slideCount = 0;
    /** 是否悬停（控制 hover 箭头显隐） */
    isHover = false;
    autoplayTimer = null;
    componentWillLoad() {
        // 在首次渲染前确定幻灯片数量，避免 render 期 state 变更
        this.updateSlideCount();
    }
    componentDidLoad() {
        this.startAutoplay();
    }
    disconnectedCallback() {
        this.stopAutoplay();
    }
    handleAutoplayOptionsChange() {
        this.stopAutoplay();
        this.startAutoplay();
    }
    handleCurrentChange(newVal) {
        this.hbChange.emit(newVal);
    }
    /** 读取 slot 投影的子元素数量 */
    updateSlideCount() {
        const children = Array.from(this.el.children).filter((node) => {
            // 仅统计真实幻灯片（排除 slot 占位），Element 节点即视为幻灯片
            return node.nodeType === Node.ELEMENT_NODE;
        });
        const next = children.length;
        if (next !== this.slideCount) {
            this.slideCount = next;
        }
    }
    startAutoplay() {
        if (!this.autoplay || this.slideCount <= 1)
            return;
        this.stopAutoplay();
        this.autoplayTimer = setInterval(() => {
            this.next();
        }, this.interval);
    }
    stopAutoplay() {
        if (this.autoplayTimer !== null) {
            clearInterval(this.autoplayTimer);
            this.autoplayTimer = null;
        }
    }
    next = () => {
        const total = this.slideCount;
        if (total === 0)
            return;
        let nextIndex = this.current + 1;
        if (nextIndex >= total) {
            if (this.loop) {
                nextIndex = 0;
            }
            else {
                return;
            }
        }
        this.setCurrent(nextIndex);
    };
    prev = () => {
        const total = this.slideCount;
        if (total === 0)
            return;
        let nextIndex = this.current - 1;
        if (nextIndex < 0) {
            if (this.loop) {
                nextIndex = total - 1;
            }
            else {
                return;
            }
        }
        this.setCurrent(nextIndex);
    };
    setCurrent(index) {
        if (index === this.current)
            return;
        this.current = index;
    }
    handleMouseEnter = () => {
        this.isHover = true;
        if (this.autoplay)
            this.stopAutoplay();
    };
    handleMouseLeave = () => {
        this.isHover = false;
        if (this.autoplay)
            this.startAutoplay();
    };
    handleDotClick = (index) => {
        this.setCurrent(index);
    };
    get showArrows() {
        if (this.arrow === 'never')
            return false;
        if (this.arrow === 'always')
            return true;
        return this.isHover; // hover
    }
    render() {
        const total = this.slideCount;
        const offset = total > 0 ? -(this.current % total) * 100 : 0;
        return (h("div", { key: 'd4a2c7809134bc70f1cbc75ced38472fe58d9ae4', class: "hb-carousel", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '61abdd066bcbf6942b7c09ef5035b377c69bd960', class: "hb-carousel__container" }, h("div", { key: '2ec0410bc8bce45f311c31264ac45f18973d22bc', class: "hb-carousel__track", style: { transform: `translateX(${offset}%)` } }, h("slot", { key: '045b8a566946f5f420a2313cf5fa71ca15263536' })), this.showArrows && (h("button", { key: 'd3b35fc7472655686f1710f15dc9a9d7475890f0', type: "button", class: "hb-carousel__arrow hb-carousel__arrow--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.showArrows && (h("button", { key: '9a9513ccf13ab2451c57b0fa157bf7a07e1fa75e', type: "button", class: "hb-carousel__arrow hb-carousel__arrow--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A"))), this.dots && total > 0 && (h("div", { key: '736bbd506e4ca71e20d637d66c6c3ab81b8ff834', class: "hb-carousel__indicators" }, Array.from({ length: total }).map((_, index) => (h("button", { type: "button", class: {
                'hb-carousel__indicator': true,
                'hb-carousel__indicator--active': index === this.current,
            }, onClick: () => this.handleDotClick(index), "aria-label": `第 ${index + 1} 张` })))))));
    }
    static get is() { return "hb-carousel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["carousel.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["carousel.css"]
        };
    }
    static get properties() {
        return {
            "current": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u5E7B\u706F\u7247\u7D22\u5F15\uFF08\u53D7\u63A7\uFF0C\u53EF\u53CC\u5411\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "current",
                "reflect": false,
                "defaultValue": "0"
            },
            "autoplay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u81EA\u52A8\u5207\u6362"
                },
                "getter": false,
                "setter": false,
                "attribute": "autoplay",
                "reflect": false,
                "defaultValue": "false"
            },
            "interval": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u81EA\u52A8\u5207\u6362\u95F4\u9694\uFF08\u6BEB\u79D2\uFF09"
                },
                "getter": false,
                "setter": false,
                "attribute": "interval",
                "reflect": false,
                "defaultValue": "3000"
            },
            "arrow": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CarouselArrow",
                    "resolved": "\"always\" | \"hover\" | \"never\"",
                    "references": {
                        "CarouselArrow": {
                            "location": "local",
                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Carousel/Carousel.tsx",
                            "id": "src/components/Carousel/Carousel.tsx::CarouselArrow"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5207\u6362\u7BAD\u5934\u5C55\u793A\u65F6\u673A"
                },
                "getter": false,
                "setter": false,
                "attribute": "arrow",
                "reflect": false,
                "defaultValue": "'hover'"
            },
            "dots": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u6307\u793A\u70B9"
                },
                "getter": false,
                "setter": false,
                "attribute": "dots",
                "reflect": false,
                "defaultValue": "true"
            },
            "loop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u5FAA\u73AF\u64AD\u653E"
                },
                "getter": false,
                "setter": false,
                "attribute": "loop",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "slideCount": {},
            "isHover": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u7D22\u5F15\u53D8\u5316\u4E8B\u4EF6\uFF0Cdetail \u4E3A\u65B0\u7D22\u5F15"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "autoplay",
                "methodName": "handleAutoplayOptionsChange"
            }, {
                "propName": "interval",
                "methodName": "handleAutoplayOptionsChange"
            }, {
                "propName": "current",
                "methodName": "handleCurrentChange"
            }];
    }
}
//# sourceMappingURL=Carousel.js.map
