import { Build, h, Host } from "@stencil/core";
import { Effect } from "effect";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
import { emptyDefaultSvg, fetchIconSvg } from "./icons";
export class LmvzIcon extends ReactiveControllerHost {
    intersectionObserver;
    el;
    icon;
    weight = 'medium';
    size = 'md';
    iconData;
    visible = false;
    ariaLabel;
    get ariaHidden() {
        return !this.ariaLabel;
    }
    constructor() {
        super();
        this.addController(new AriaValidationController(this));
    }
    connectedCallback() {
        this.waitUntilVisible(() => {
            this.visible = true;
            this.loadIconPathData();
        });
    }
    disconnectedCallback() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
            this.intersectionObserver = null;
        }
    }
    async loadIconPathData() {
        const { icon, visible } = this;
        if (!Build.isBrowser || !icon || !visible) {
            return;
        }
        this.iconData = await Effect.runPromise(fetchIconSvg(this.icon).pipe(Effect.tapError(error => Effect.logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), Effect.catchAll(() => Effect.succeed(emptyDefaultSvg()))));
    }
    render() {
        return h(Host, { key: '50d0f96ec5085a47ca7783e5232dfb503fa32d29', 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) {
                    this.intersectionObserver.disconnect();
                    this.intersectionObserver = null;
                    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 assetsDirs() { return ["../../assets/icons"]; }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Icon.IconName",
                    "resolved": "\"Logo\" | \"actions\" | \"adduser\" | \"alert\" | \"apple\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"book\" | \"bookmark\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close-l\" | \"close-sm\" | \"cog\" | \"computer\" | \"dashboard\" | \"delete\" | \"download\" | \"edit\" | \"external\" | \"facebook\" | \"favorite\" | \"filter\" | \"group\" | \"hide\" | \"home\" | \"info\" | \"instagram\" | \"letter\" | \"linkedin\" | \"logout\" | \"map\" | \"minus\" | \"navigation\" | \"plus\" | \"qr-scan\" | \"question\" | \"reader\" | \"reset\" | \"school\" | \"search\" | \"send\" | \"settings\" | \"share\" | \"shopping-cart\" | \"show\" | \"snapchat\" | \"sort\" | \"speech-bubble\" | \"star\" | \"student\" | \"upload\" | \"user\" | \"warn-circle\" | \"warn-triangle\" | \"whatsapp\" | \"world\" | \"x\" | \"youtube\"",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.ts::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the icon to display (required)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "weight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Icon.IconWeight",
                    "resolved": "\"bold\" | \"filled\" | \"medium\" | \"thin\"",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.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\"",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.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'"
            },
            "ariaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "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"
            }];
    }
}
