import { Host, h } from "@stencil/core";
import { SxStyleManager } from "../../utils/sx-style-manager";
export class DgaNotification {
    constructor() {
        this.icon = true;
        this.link = false;
        this.dismissable = false;
        this.icons = {
            success: {
                name: "checkmark-circle-02",
                variant: "solid",
                type: "sharp",
            },
            info: {
                name: "information-circle",
                variant: "solid",
                type: "sharp",
            },
            neutral: {
                name: "information-circle",
                variant: "solid",
                type: "sharp",
            },
            warning: {
                name: "alert-02",
                variant: "solid",
                type: "sharp",
            },
            critical: {
                name: "alert-circle",
                variant: "solid",
                type: "sharp",
            },
        };
        // Generate a unique ID if not provided
        this.componentId = `dga-notification-${Math.random().toString(36).substring(2, 9)}`;
        // Computed inline styles
        this.rootStyles = {};
    }
    handleSxChange() {
        this.processStyling();
    }
    componentWillLoad() {
        // Initialize style manager with element reference
        this.sxStyleManager = new SxStyleManager(this.componentId, this.el);
    }
    componentDidLoad() {
        // Process styling after the component is fully loaded and shadow DOM is ready
        this.processStyling();
    }
    componentDidUpdate() {
        // Re-process styling after updates
        this.processStyling();
    }
    processStyling() {
        if (!this.sx)
            return;
        // Handle both string and object formats
        const sxValue = typeof this.sx === 'string' ? JSON.parse(this.sx) : this.sx;
        this.rootStyles = this.sxStyleManager.processSxProp(sxValue);
    }
    disconnectedCallback() {
        var _a;
        // Clean up styles when component is removed
        (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
    }
    render() {
        return (h(Host, { key: 'c780b2a9ec8286e8a07b539d5c01978c73674edc', id: this.componentId, style: this.rootStyles }, h("div", { key: '5422c00322a015643136f9501474e82c9b4bc5f8', class: `notification notification--${this.variant}`, role: "alert" }, h("div", { key: '13f9e3763da464acfe59f3e49221c243c5a59487', class: "notification__content" }, this.icon && h("div", { key: 'd13ed9a3637a3d5c9fc0f152c186758d1505b16c', class: "notification__icon" }, h("dga-icon-v2", { key: '1fb84d67ef6a981be0746225c3ffcf0cbeb83566', name: this.icons[this.variant].name, variant: this.icons[this.variant].variant, type: this.icons[this.variant].type, size: 24 })), this.leadText && h("strong", { key: '0db0967eb603a960e0bded4be6742eefbfc713f7', class: "notification__lead-text" }, this.leadText, ": "), h("p", { key: 'be7449e8a068860f5fbc8b8e5ed7571d4c7f3fef' }, this.content), this.link && (h("a", { key: '49c8bc84143aa692052562702a2bda51b0a7eb28', onClick: () => {
                this.navigateTo && this.navigateTo(this.setNavigateTo);
            }, class: "notification__link link link--md link--neutral link--inline" }, h("span", { key: 'de5bbd873d7f93c6f69e82c0f5e12f1ee32b6160', class: "link__label" }, this.textLink)))), this.dismissable && (h("div", { key: '963b8fd68fcf2ca869db4a5aa2d1b008960ff3c9', class: "notification__dismiss" }, h("button", { key: '9274fa4c3df51bfb8b17ed9573e62135333daab3', class: "dga-btn dga-btn--close dga-btn--icon dga-btn--md", onClick: () => {
                this.dismmissed && this.dismmissed();
            } }, h("span", { key: '7c72401e5c8ff914d54b7014069c8178ac0d0472', class: "dga-btn-icon" }, h("dga-icon-v2", { key: '187ec9b2630b6190ae20a72296e9543a15e65e11', name: "multiplication-sign", variant: 'stroke', size: 20 }))))))));
    }
    static get is() { return "dga-notification"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-notification.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-notification.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "boolean",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "leadText": {
                "type": "string",
                "attribute": "lead-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "content": {
                "type": "string",
                "attribute": "content",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "variant": {
                "type": "string",
                "attribute": "variant",
                "mutable": false,
                "complexType": {
                    "original": "'critical' | 'warning' | 'success' | 'info' | 'neutral'",
                    "resolved": "\"critical\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "link": {
                "type": "boolean",
                "attribute": "link",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "textLink": {
                "type": "string",
                "attribute": "text-link",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "dismissable": {
                "type": "boolean",
                "attribute": "dismissable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "setNavigateTo": {
                "type": "string",
                "attribute": "set-navigate-to",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "navigateTo": {
                "type": "unknown",
                "attribute": "navigate-to",
                "mutable": false,
                "complexType": {
                    "original": "(link?: string) => void",
                    "resolved": "(link?: string) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "dismmissed": {
                "type": "unknown",
                "attribute": "dismmissed",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "sx": {
                "type": "string",
                "attribute": "sx",
                "mutable": false,
                "complexType": {
                    "original": "SxProps | string",
                    "resolved": "string | { [x: string]: any; }",
                    "references": {
                        "SxProps": {
                            "location": "import",
                            "path": "../../utils/sx-style-manager",
                            "id": "src/utils/sx-style-manager.ts::SxProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "sx",
                "methodName": "handleSxChange"
            }];
    }
}
