# Source: alpha/not-complete/uib-wrap.js

    // @ts-nocheck
    /** Web component for UIBUILDER for Node-RED that lets you wrap around
     *  a 3rd-party JavaScript library to make it responsive to data from Node-RED.
     *
     * See ./docs/uib-wrap.md for detailed documentation on installation and use.
     *
     * version: 0.0.1 2024-01-31
     *
     * TODO: Add custom events to allow processing of updates in the browser
     *
     * See https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc on how to document
     *
     * Use `npx web-component-analyzer ./components/ghost-thermometer.js` to create/update the documentation
     *     or paste into https://runem.github.io/web-component-analyzer/
     * Use `npx web-component-analyzer ./components/*.js --format vscode --outFile ./vscode-descriptors/ti-web-components.html-data.json`
     *     to generate/update vscode custom data files. See https://github.com/microsoft/vscode-custom-data/tree/main/samples/webcomponents
     *
     * To Do:
     * - Use https://tabulator.info as example
     * - Attribs: new, selector, uib-var, uib-topic, lib-name
     */
    /*
      Copyright (c) 2024 Julian Knight (Totally Information)

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    */

    export default class UibWrap extends HTMLElement {
        //#region --- Class Properties ---
        static componentName = 'uib-wrap'
        static className = 'UibWrap'
        /** @type {Array<string>} List of all of the html attribs (props) listened to */
        static observedAttributes = ['new', 'selector', 'lib-name', 'config-var']
        /** Shadow DOM Template (if required) */
        static template = document.createElement('template')
        new = false
        libName
        config
        selector = 'div' // ':first-child'
        //#endregion --- Class Properties ---

        // Cannot control the normal DOM here, use connectedCallback
        constructor() {
            super()

            // Shadow DOM template (if needed)
            UibWrap.template.innerHTML = /** @type {HTMLTemplateElement} */ /*html*/`
            <style>
                :host {
                    /* display: block;   default is inline */
                    contain: content; /* performance boost */
                }
            </style>
            <slot></slot>
            `
            this.attachShadow({ mode: 'open', delegatesFocus: true, })
                .append(UibWrap.template.content.cloneNode(true))
            this.$ = this.shadowRoot.querySelector.bind(this.shadowRoot)

            // console.log('construct ended')
        }

        /** NOTE: On initial startup, this is called for each watched attrib set in HTML - BEFORE connectedCallback is called
         * @param {string} attrib - The name of the attribute that has changed
         * @param {string} oldVal - The old value of the attribute
         * @param {string} newVal - The new value of the attribute
         */
        attributeChangedCallback(attrib, oldVal, newVal) {
            if (oldVal === newVal) return
            console.log('attributeChangedCallback', attrib, oldVal, newVal)

            switch (attrib) {
                case 'new': {
                    console.log('new', newVal)
                    try {
                        newVal = newVal.toLowerCase()
                    } catch (e) {}
                    if (newVal === 'true' || newVal === '' || newVal === true) newVal = true
                    else newVal = false
                    this.new = newVal
                    console.log('new', this.new, newVal)
                    break
                }
                case 'config-var': {
                    this.config = newVal
                    // this.args = uibuilder.get(newVal)
                    // if (!Array.isArray(this.args)) this.args = [this.args]
                    // console.log(this.args)
                    break
                }
                case 'lib-name': {
                    this.libName = newVal
                    break
                }

                default: {
                    this[attrib] = newVal
                    break
                }
            }
        } // --- end of attributeChangedCallback --- //

        // Runs when an instance is added to the DOM
        connectedCallback() {
            setTimeout(() => {
                console.log(this.config, window['tbConfig'], window['uibuilder'].tbConfig)
                // @ts-ignore
                let args = uibuilder.get(this.config) // eslint-disable-line no-undef
                if (!Array.isArray(args)) args = [args]
                console.log(args)
                this.initialiseLib(args)
                console.log('connected')
            }, 100)
        }

        // Runs when an instance is removed from the DOM
        // disconnectedCallback() {}

        initialiseLib(args) {
            // Is the library available?
            if (!window[this.libName]) throw new Error(`[UibWrap] Library '${this.libName}' not available`)
            // Is the config variable available?

            // Initialise the library
            if (this.new === false) {
                this.fn = window[this.libName](...args)
            } else {
                this.fn = new window[this.libName](...args)
            }
            // Set up listener
        }
    }

    // Automatically dd the class as a new Custom Element to the window object
    if (!customElements.get(UibWrap.componentName)) customElements.define(UibWrap.componentName, UibWrap)