import { isValidSVG } from "@lmvz-ds/lib-ts/validation/svg.js";
import { Build, h, Host } from "@stencil/core";
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
import { resolveIconSvg } from "../../utils/icons/icons";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
export class LmvzIcon extends ReactiveControllerHost {
    intersectionObserver;
    ariaValidationController = new AriaValidationController(this);
    el;
    validationEl;
    icon;
    weight = 'medium';
    size = 'md';
    iconset;
    iconData;
    visible = false;
    ariaLabel;
    get ariaHidden() {
        return !this.ariaLabel;
    }
    constructor() {
        super();
        this.addController(this.ariaValidationController);
    }
    connectedCallback() {
        this.waitUntilVisible(() => {
            this.visible = true;
            this.loadIconPathData();
        });
        super.connectedCallback();
    }
    disconnectedCallback() {
        if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
            this.intersectionObserver.disconnect();
        }
        this.intersectionObserver = undefined;
        super.disconnectedCallback();
    }
    async loadIconPathData() {
        const { icon, iconset, visible } = this;
        if (!Build.isBrowser || !icon || !visible) {
            return;
        }
        if (isValidSVG(icon)) {
            this.iconData = icon;
            return;
        }
        this.iconData = await resolveIconSvg({
            icon,
            iconset,
        });
    }
    componentDidRender() {
        this.validationEl = this.el.querySelector('svg');
        this.ariaValidationController.revalidateAria();
        super.componentDidRender();
    }
    render() {
        return h(Host, { key: '6022ed0e30bcdd13455ccaae65784ac70abcb349', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
    }
    waitUntilVisible(callback, rootMargin = 50) {
        if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
            callback();
            return;
        }
        this.intersectionObserver = new IntersectionObserver((entries) => {
            entries.some((entry) => {
                if (entry.isIntersecting) {
                    if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
                        this.intersectionObserver.disconnect();
                    }
                    this.intersectionObserver = undefined;
                    callback();
                    return true;
                }
                return false;
            });
        }, { rootMargin: `${rootMargin}px` });
        this.intersectionObserver.observe(this.el);
    }
    static get is() { return "lmvz-icon"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["lmvz-icon.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["lmvz-icon.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SVGString | string",
                    "resolved": "string | string & Brand<\"SVG\">",
                    "references": {
                        "SVGString": {
                            "location": "import",
                            "path": "@lmvz-ds/lib-ts/validation/SVGString.d.ts",
                            "id": "../../lib/ts/dist/validation/SVGString.d.ts::SVGString",
                            "referenceLocation": "SVGString"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the (default) iconset."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "weight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Icon.IconWeight",
                    "resolved": "\"bold\" | \"filled\" | \"medium\" | \"thin\" | undefined",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.d.ts::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The weight/style of the icon (optional, default is 'medium')."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "weight",
                "defaultValue": "'medium'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Icon.Size",
                    "resolved": "\"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | undefined",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.d.ts::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the icon (optional, default is 'md')."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "size",
                "defaultValue": "'md'"
            },
            "iconset": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "iconset"
            },
            "ariaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "aria-label"
            }
        };
    }
    static get states() {
        return {
            "iconData": {},
            "visible": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "icon",
                "methodName": "loadIconPathData"
            }, {
                "propName": "iconset",
                "methodName": "loadIconPathData"
            }];
    }
}
