import { Build, h, Host } from "@stencil/core";
import { IconClass, IconColors } from "./constants";
import { fetchIcon } from "../../utils/icon.utils";
import { govHost } from "../../helpers/Dom/template";
import { iconsLazyLoad } from "../../helpers/Dom/win";
import { validateProp } from "../../helpers/Validate/props";
import { Sizes } from "../../core/constants/sizes";
import { isValidSVG } from "../../helpers/Dom/document";
export class GovIcon {
    constructor() {
        /**
         * Name of icon in folder
         */
        this.name = null;
        /**
         * Type (folder) of icon
         */
        this.type = "components";
        this.visible = false;
        this.error = false;
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(Sizes, newValue, IconClass.root);
    }
    validateColor(newValue) {
        validateProp(IconColors, newValue, IconClass.root);
    }
    async loadIconPathData() {
        const { name, visible } = this;
        if (!Build.isBrowser || !name || !visible) {
            return;
        }
        await this.loadIcon();
    }
    connectedCallback() {
        if (iconsLazyLoad()) {
            this.visible = true;
            this.loadIconPathData().finally();
        }
        else {
            this.waitUntilVisible(async () => {
                this.visible = true;
                await this.loadIconPathData();
            });
        }
    }
    disconnectedCallback() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
            this.intersectionObserver = null;
        }
    }
    async componentWillLoad() {
        this.validateSize(this.size);
        this.validateColor(this.color);
        await this.loadIconPathData();
    }
    waitUntilVisible(callback) {
        if (!Build.isBrowser || typeof window === "undefined" || !window.IntersectionObserver) {
            callback();
            return;
        }
        this.intersectionObserver = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (this.intersectionObserver) {
                        this.intersectionObserver.disconnect();
                        this.intersectionObserver = null;
                    }
                    callback();
                }
            });
        }, { rootMargin: "50px" });
        this.intersectionObserver.observe(this.host);
    }
    async loadIcon() {
        try {
            const { name, type } = this;
            const data = await fetchIcon({ name, type });
            const isValid = isValidSVG(data);
            this.host.innerHTML = isValid ? data : null;
        }
        catch (e) {
            this.host.innerHTML = '';
            this.error = true;
        }
    }
    render() {
        if (this.error) {
            return null;
        }
        return (h(Host, { class: this.h.classes(IconClass.root), size: this.size, color: this.color }));
    }
    static get is() { return "gov-icon"; }
    static get assetsDirs() { return ["assets"]; }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "IconSizesType",
                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "IconSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-icon/constants.ts::IconSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon size"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "IconColorType",
                    "resolved": "\"black\" | \"default\" | \"disabled\" | \"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"white\"",
                    "references": {
                        "IconColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-icon/constants.ts::IconColorType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon color"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name of icon in folder"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "null"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type (folder) of icon"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "\"components\""
            }
        };
    }
    static get states() {
        return {
            "visible": {},
            "error": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "color",
                "methodName": "validateColor"
            }, {
                "propName": "name",
                "methodName": "loadIconPathData"
            }];
    }
}
//# sourceMappingURL=gov-icon.js.map
