/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { h, Build } from "@stencil/core";
import { addGlobalStylesheetToShadow } from "../../utils/style";
/**
 * Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
 *
 * @status new
 * @version 8.0.0
 */
export class NanoBreadcrumb {
    el;
    /** Array of breadcrumb items to render */
    breadcrumbs = [];
    isOpen = false;
    isOverflowing = false;
    mainRef;
    componentDidLoad() {
        if (Build.isBrowser) {
            this.checkOverflow();
            addGlobalStylesheetToShadow(this.el?.shadowRoot);
        }
    }
    componentDidUpdate() {
        if (Build.isBrowser) {
            this.checkOverflow();
        }
    }
    connectedCallback() {
        if (Build.isBrowser) {
            window.addEventListener('resize', this.checkOverflow);
        }
    }
    disconnectedCallback() {
        if (Build.isBrowser) {
            window.removeEventListener('resize', this.checkOverflow);
        }
    }
    checkOverflow = () => {
        if (!this.mainRef)
            return;
        const containerWidth = this.el.clientWidth;
        const contentWidth = this.mainRef.scrollWidth;
        const shouldOverflow = contentWidth > containerWidth * 0.9;
        if (this.isOverflowing !== shouldOverflow) {
            this.isOverflowing = shouldOverflow;
            if (this.isOverflowing)
                this.isOpen = false; // Reset dropdown state when overflow occurs
        }
    };
    render() {
        const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
        if (returnBreadcrumb) {
            return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
        }
        const parentBreadcrumb = this.breadcrumbs?.length
            ? this.breadcrumbs.at(-1)
            : null;
        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                'trigger-icon': true,
                'trigger-icon--open': this.isOpen,
            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
                return: breadcrumb.return,
                link: !!breadcrumb.href,
            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
    }
    static get is() { return "nano-breadcrumb"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["breadcrumb.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["breadcrumb.css"]
        };
    }
    static get properties() {
        return {
            "breadcrumbs": {
                "type": "unknown",
                "attribute": "breadcrumbs",
                "mutable": false,
                "complexType": {
                    "original": "Breadcrumb[]",
                    "resolved": "Breadcrumb[]",
                    "references": {
                        "Breadcrumb": {
                            "location": "local",
                            "path": "/builds/MHdwmaDa/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                            "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Array of breadcrumb items to render"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {},
            "isOverflowing": {}
        };
    }
    static get elementRef() { return "el"; }
}
const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
