/* eslint-disable @typescript-eslint/no-explicit-any */
import { h } from "@stencil/core";
import { ListType } from "./list-type.enum";
import { logger } from "../../../global/utils/logger";
/**
 * @slot default - ska innehålla <li>-element
 *
 * @enums ListType - list-type.enum.ts
 *
 * @swedishName Listor
 */
export class List {
    constructor() {
        this.listItems = [];
        this.hasSlottedItems = undefined;
        this.afListType = ListType.BULLET;
    }
    componentWillLoad() {
        this.getListItems();
    }
    componentWillUpdate() {
        this.getListItems();
    }
    componentDidLoad() {
        // Observe changes to children for dynamically added items
        this._observer = new MutationObserver(() => {
            this.getListItems();
        });
        //observes changes to the list of child nodes
        this._observer.observe(this.hostElement, { childList: true });
        this.applyCheckedListStyling();
    }
    componentDidUpdate() {
        this.applyCheckedListStyling();
    }
    // Stop observing changes when the component no longer exists in the DOM
    disconnectedCallback() {
        if (this._observer) {
            this._observer.disconnect();
        }
    }
    applyCheckedListStyling() {
        if (this.afListType === ListType.CHECKED) {
            const lis = this.hostElement.querySelectorAll('li');
            lis.forEach((li) => {
                if (!li.querySelector('digi-icon-check')) {
                    const icon = document.createElement('digi-icon-check');
                    icon.classList.add('digi-list__icon');
                    li.insertBefore(icon, li.firstChild);
                }
            });
        }
        else {
            const lis = this.hostElement.querySelectorAll('li');
            lis.forEach((li) => {
                const icon = li.querySelector('digi-icon-check');
                if (icon) {
                    li.removeChild(icon);
                }
            });
        }
    }
    getListItems() {
        const slotItems = this.hostElement.querySelectorAll('li');
        //maybe not needed, do we want to warn in the consol, or is this maybe a failsafe?
        if (!slotItems || slotItems.length <= 0) {
            this.hasSlottedItems = false;
            this.listItems = [];
            logger.warn(`The slot contains no <li> elements.`, this.hostElement);
            return;
        }
        this.hasSlottedItems = true;
        this.listItems = Array.from(slotItems);
    }
    render() {
        const Tag = this.afListType === ListType.NUMBERED ? 'ol' : 'ul';
        const className = {
            'digi-list': true,
            [`digi-list--${this.afListType}`]: true
        };
        return (h("digi-typography", { key: 'c8886bcce56127fce745a9538b9d7f83ae9f5bb2' }, h(Tag, { key: 'e682bfdfc148955e526cc55884a93495aaf5b7fc', class: className }, h("slot", { key: 'afa6e0c99b211bb3b7175788edcfa01d49b60887' }))));
    }
    static get is() { return "digi-list"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["list.css"]
        };
    }
    static get properties() {
        return {
            "afListType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ListType",
                    "resolved": "ListType.BULLET | ListType.CHECKED | ListType.NUMBERED",
                    "references": {
                        "ListType": {
                            "location": "import",
                            "path": "./list-type.enum",
                            "id": "src/components/_list/list/list-type.enum.ts::ListType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set list type. Can be 'bullet', 'numbered' eller 'checked'."
                        }],
                    "text": "S\u00E4tter typ. Kan vara 'bullet', 'numbered', eller 'checked'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-list-type",
                "reflect": false,
                "defaultValue": "ListType.BULLET"
            }
        };
    }
    static get states() {
        return {
            "listItems": {},
            "hasSlottedItems": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
