import { h, } from "@stencil/core";
import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter-clickable";
import { createRandomString } from "../../util/random-string";
import { getIconColor, getIconName } from "../icon/get-icon-props";
/**
 * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
 * before ending up where they are right now, in a website or an application.
 *
 * These "places" can be for example _pages_ of a website, which are hierarchically
 * laid out before the current page that the user is looking at.
 * They could also be _steps_ which the user has gone through, which perhaps have no
 * hierarchical relation with each other, but has eventually led the user "here".
 *
 * :::note
 * - Where the user currently is, is always the last step of the breadcrumb.
 * - A breadcrumbs never shows where users can go after this place.
 * It only illustrates where user has been before ending up here.
 * If the path that a user can take is not changing and if next steps are clear,
 * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
 * :::
 *
 * Breadcrumbs are often placed horizontally before the main content of the current screen.
 *
 * @exampleComponent limel-example-breadcrumbs-links
 * @exampleComponent limel-example-breadcrumbs-buttons
 * @exampleComponent limel-example-breadcrumbs-icons
 * @exampleComponent limel-example-breadcrumbs-divider
 * @exampleComponent limel-example-breadcrumbs-icon-color
 * @exampleComponent limel-example-breadcrumbs-styling
 */
export class Breadcrumbs {
    constructor() {
        /**
         * The visual divider that separates items.
         * It must be a single character such as `-` or `,`.
         */
        this.divider = '›';
        this.renderSteps = () => {
            const allStepsWithoutLast = this.items.slice(0, -1);
            if (this.areItemsLinks(this.items)) {
                return allStepsWithoutLast.map(this.renderAsLink);
            }
            return allStepsWithoutLast.map(this.renderAsButton);
        };
        this.renderAsButton = (item) => {
            const tooltipId = createRandomString();
            return [
                h("button", { role: "listitem", id: tooltipId, class: "step", onClick: this.handleClick(item) }, this.renderIcon(item), this.renderLabel(item)),
                this.renderTooltip(item, tooltipId),
            ];
        };
        this.renderAsLink = (item) => {
            const tooltipId = createRandomString();
            return [
                h("a", { role: "listitem", id: tooltipId, class: "step", href: item.link.href, title: item.link.title }, this.renderIcon(item), this.renderLabel(item)),
                this.renderTooltip(item, tooltipId),
            ];
        };
        this.renderLastStep = () => {
            const lastItem = this.items.slice(-1);
            return (h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), h("span", { class: "text" }, lastItem[0].text)));
        };
        this.renderIcon = (item) => {
            const name = getIconName(item.icon);
            const color = getIconColor(item.icon);
            if (!name) {
                return;
            }
            return (h("limel-icon", { style: {
                    color: `${color}`,
                }, name: name }));
        };
        this.renderLabel = (item) => {
            if (item.type === 'icon-only') {
                return;
            }
            return h("span", { class: "text" }, item.text);
        };
        this.renderTooltip = (item, tooltipId) => {
            if (item.type === 'icon-only') {
                return h("limel-tooltip", { elementId: tooltipId, label: item.text });
            }
        };
        this.areItemsLinks = (items) => {
            return items.some((item) => 'link' in item);
        };
        this.handleClick = (item) => (event) => {
            event.stopPropagation();
            this.select.emit(item);
        };
    }
    render() {
        return (h("ol", { key: 'f50410ba0661038c303f8fbadb9147f858e70647', role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
    }
    componentWillLoad() {
        makeEnterClickable(this.host);
    }
    disconnectedCallback() {
        removeEnterClickable(this.host);
    }
    static get is() { return "limel-breadcrumbs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["breadcrumbs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["breadcrumbs.css"]
        };
    }
    static get properties() {
        return {
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "BreadcrumbsItem[]",
                    "resolved": "BreadcrumbsItem[]",
                    "references": {
                        "BreadcrumbsItem": {
                            "location": "import",
                            "path": "./breadcrumbs.types",
                            "id": "src/components/breadcrumbs/breadcrumbs.types.ts::BreadcrumbsItem",
                            "referenceLocation": "BreadcrumbsItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "List of items in the breadcrumbs,\neach representing a step or a page."
                },
                "getter": false,
                "setter": false
            },
            "divider": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The visual divider that separates items.\nIt must be a single character such as `-` or `,`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "divider",
                "defaultValue": "'\u203A'"
            }
        };
    }
    static get events() {
        return [{
                "method": "select",
                "name": "select",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when clicking on buttons (not links!)\ninside the breadcrumbs."
                },
                "complexType": {
                    "original": "BreadcrumbsItem",
                    "resolved": "BreadcrumbsItem",
                    "references": {
                        "BreadcrumbsItem": {
                            "location": "import",
                            "path": "./breadcrumbs.types",
                            "id": "src/components/breadcrumbs/breadcrumbs.types.ts::BreadcrumbsItem",
                            "referenceLocation": "BreadcrumbsItem"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
}
