import { Fragment, h } from "@stencil/core";
export class DgaBreadcrumbs {
    constructor() {
        this.items = []; // Items will be passed as a JSON string
        this.max = 5;
        this.breadcrumbItems = [];
        this.isMenuOpen = false; // State to control menu visibility
        this.toggleMenu = () => {
            this.isMenuOpen = !this.isMenuOpen;
            if (this.isMenuOpen) {
                document.addEventListener('click', this.handleOutsideClick);
            }
            else {
                document.removeEventListener('click', this.handleOutsideClick);
            }
        };
        this.closeMenu = () => {
            this.isMenuOpen = false;
            document.removeEventListener('click', this.handleOutsideClick);
        };
        this.handleOutsideClick = (event) => {
            const target = event.target;
            if (!this.host.contains(target)) {
                this.closeMenu();
            }
        };
    }
    componentWillLoad() {
        this.handleItemsChange(this.items);
    }
    disconnectedCallback() {
        // Clean up event listener on component unmount
        document.removeEventListener('click', this.handleOutsideClick);
    }
    handleItemsChange(newValue) {
        try {
            this.breadcrumbItems = this.renderItems(newValue);
        }
        catch (error) {
            console.error('Invalid JSON in items prop:', error);
        }
    }
    isEllipsisItem(item) {
        return item.ellipsis === true;
    }
    // private renderItems(items: IBreadcrumbsItem[]): BreadcrumbItemOrEllipsis[] {
    //   if (items.length <= 5) {
    //     return items;
    //   }
    //   return [items[0], { ellipsis: true, items: [...items.slice(1, -2)] }, ...items.slice(-2)];
    // }
    renderItems(items) {
        // If items are less than or equal to max, return all items
        if (items.length <= this.max) {
            return items;
        }
        // Ensure max is at least 3 to show first item, ellipsis, and last item
        const effectiveMax = Math.max(3, this.max);
        // Calculate visible items (excluding ellipsis)
        const visibleCount = effectiveMax - 1; // Reserve one spot for ellipsis
        // Always show at least first and last item
        const firstHalf = Math.max(1, Math.floor(visibleCount / 2));
        const secondHalf = Math.max(1, visibleCount - firstHalf);
        const firstItems = items.slice(0, firstHalf);
        const lastItems = items.slice(-secondHalf);
        const middleItems = items.slice(firstHalf, -secondHalf);
        // Only create ellipsis if there are middle items
        if (middleItems.length === 0) {
            return [...firstItems, ...lastItems];
        }
        return [
            ...firstItems,
            { ellipsis: true, items: middleItems },
            ...lastItems
        ];
    }
    handleClick(e, link, item) {
        if (!item.disabled) {
            this.breadcrumbClick.emit({ e, link, item });
            this.closeMenu();
        }
    }
    render() {
        return (h("nav", { key: '6f1e3cbf9e2781e31175b4475da3304ea10bbbe5', "aria-label": "breadcrumb" }, h("ul", { key: 'c4563de55d2caa395895825e1823422cf979a552', class: "dga-breadcrumb" }, this.breadcrumbItems.map((item, index) => {
            if (this.isEllipsisItem(item)) {
                return (h("li", { key: index, class: "dga-breadcrumb-item ellipsis" }, h("span", { class: "dga-breadcrumb-icon" }, h("dga-icon", { icon: 'ArrowRight01Icon', variant: "stroke", type: "rounded" })), h("a", { onClick: () => {
                        this.toggleMenu();
                        return false;
                    }, "aria-haspopup": "true", "aria-expanded": this.isMenuOpen ? 'true' : 'false', class: "link link--md link--neutral" }, "..."), this.isMenuOpen && (h("ul", { class: "dga-breadcrumb-dropdown" }, item.items.map(ellipsedItem => (h("li", { key: ellipsedItem === null || ellipsedItem === void 0 ? void 0 : ellipsedItem.label, class: "dga-breadcrumb-dropdown-item" }, h("a", { onClick: e => this.handleClick(e, ellipsedItem.path, ellipsedItem), class: {
                        // 'link link--md link--neutral': true,
                        'disabled-link': ellipsedItem.disabled,
                    }, href: ellipsedItem.disabled ? undefined : ellipsedItem.path, "aria-disabled": ellipsedItem.disabled ? 'true' : 'false' }, h("span", { class: "link__label" }, ellipsedItem.label)))))))));
            }
            const isLastItem = index === this.breadcrumbItems.length - 1;
            const first = index === 0;
            return (h("li", { key: index, class: {
                    'dga-breadcrumb-item': true,
                    'active': isLastItem,
                }, "aria-current": isLastItem ? 'page' : undefined }, item.path && !isLastItem ? (h(Fragment, null, !first && (h("span", { class: "dga-breadcrumb-icon" }, h("dga-icon", { icon: 'ArrowRight01Icon', variant: "stroke", type: "rounded" }))), h("a", { onClick: e => this.handleClick(e, item.path, item), class: {
                    'link link--md link--neutral': true,
                    'disabled-link': item.disabled,
                }, href: item.disabled ? undefined : item.path, "aria-disabled": item.disabled ? 'true' : 'false' }, h("span", { class: "link__label" }, item.label)))) : (h(Fragment, null, h("span", { class: "dga-breadcrumb-icon" }, h("dga-icon", { icon: 'ArrowRight01Icon', variant: "stroke", type: "rounded" })), h("a", { onClick: e => this.handleClick(e, item.path, item), class: {
                    'link link--md link--neutral': true,
                    'disabled-link': item.disabled,
                    'link_empty': true,
                }, href: item.disabled ? undefined : undefined, "aria-disabled": item.disabled ? 'true' : 'false' }, h("span", { class: "link__label" }, item.label))))));
        }))));
    }
    static get is() { return "dga-breadcrumbs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-breadcrumbs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-breadcrumbs.css"]
        };
    }
    static get properties() {
        return {
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IBreadcrumbsItem[]",
                    "resolved": "IBreadcrumbsItem[]",
                    "references": {
                        "IBreadcrumbsItem": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-breadcrumbs/dga-breadcrumbs.tsx",
                            "id": "src/components/dga-breadcrumbs/dga-breadcrumbs.tsx::IBreadcrumbsItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false,
                "defaultValue": "5"
            }
        };
    }
    static get states() {
        return {
            "isMenuOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "breadcrumbClick",
                "name": "breadcrumbClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "items",
                "methodName": "handleItemsChange"
            }];
    }
}
//# sourceMappingURL=dga-breadcrumbs.js.map
