import { library } from '@fortawesome/fontawesome-svg-core';
import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
import { h } from "@stencil/core";
import { HEIGHT_HEADER } from '../../utils/constants';
import { ripple } from '../../utils/ripple';
library.add(faCaretDown);
export class Link {
    constructor() {
        // #endregion
        this._height = 0;
        this._links = 0;
        this.handleClick = (event) => {
            // Toggle self
            if (this._links)
                this.toggle();
            // A custom navigate function can be passed and allows client-side routing
            // without a page refresh.
            if (this.navigate &&
                event.button === 0 &&
                (!this.target || this.target === '_self') &&
                !this.isModifiedEvent(event)) {
                event.preventDefault();
                this.navigate(event);
            }
        };
        this.handleMouseDown = (event) => {
            ripple(event.target, event);
        };
        this.handleSlotChange = () => {
            const nodes = Array.from(this.el.childNodes);
            this._links = nodes.filter(node => node.nodeName === 'BCE-LINK').length;
            if (this._links)
                this.toggle(!!this.active);
        };
    }
    async toggle(active) {
        this.active = active != undefined ? active : !this.active;
        this._height = this.active ? (this._links || 0) * HEIGHT_HEADER : 0;
    }
    isModifiedEvent(event) {
        return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
    }
    componentDidLoad() {
        const root = this.el.shadowRoot;
        const query = "slot[name='subsection']";
        const slot = root.querySelector(query);
        if (slot) {
            slot.addEventListener('slotchange', this.handleSlotChange);
            this.handleSlotChange();
        }
    }
    renderCaret() {
        return h("bce-icon", { "data-toggle": true, pre: "fas", name: "caret-down", "fixed-width": true });
    }
    render() {
        return [
            h("a", { download: this.download, href: this.href, hreflang: this.hreflang, media: this.media, rel: this.rel, target: this.target, onMouseDown: this.handleMouseDown, onClick: this.handleClick },
                this.icon && h("bce-icon", { raw: this.icon, "fixed-width": true }),
                h("span", null,
                    h("slot", null)),
                !!this._links && this.renderCaret()),
            h("div", { style: { height: `${this._height}px` } },
                h("slot", { name: "subsection" }))
        ];
    }
    static get is() { return "bce-link"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "bce-link": ["bce-link.link.scss"],
        "default": ["bce-link.scss"]
    }; }
    static get styleUrls() { return {
        "bce-link": ["bce-link.link.css"],
        "default": ["bce-link.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true
        },
        "navigate": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "(event: MouseEvent) => void",
                "resolved": "(event: MouseEvent) => void",
                "references": {
                    "MouseEvent": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "download": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "download",
            "reflect": true
        },
        "href": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "href",
            "reflect": true
        },
        "hreflang": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "hreflang",
            "reflect": true
        },
        "media": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "media",
            "reflect": true
        },
        "rel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "rel",
            "reflect": true
        },
        "target": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "target",
            "reflect": true
        }
    }; }
    static get states() { return {
        "_height": {}
    }; }
    static get methods() { return {
        "toggle": {
            "complexType": {
                "signature": "(active?: boolean) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
