/*
 * Copyright (c) 2025. Brusegan Samuele, Davanzo Andrea
 * Questo file fa parte di VeyonCtrl ed è rilasciato 
 * sotto la licenza MIT. Vedere il file LICENSE per i dettagli.
 */

class HomeButton extends HTMLElement {

	static watchedList = [
		{
			attribute: "icon-src",
			htmlElement: "img",
			tagName: "src",
		},
		{
			attribute: "text",
			htmlElement: "span",
			tagName: "",
		},
		{
			attribute: "main-href",
			htmlElement: "div",
			tagName: "data-href",
		}
	];

	constructor() {
		super();

		/*
		// 0. Richiedo le variabili globali da sessionStorage
		let URL_PATH = sessionStorage.getItem("url");
		let THEME = sessionStorage.getItem("theme");
		*/

		// 1. Crea lo Shadow DOM
		const shadow = this.attachShadow({mode: 'open'});

		// 2. Definisci la struttura interna (HTML) e lo stile (CSS)
		const template = document.createElement('template');
		template.innerHTML = `
		<style>
                .btn-home {
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    gap: 20px;
                    background: var(--kashmir);
                    margin: 2rem;
                    border-radius: 1.5rem;
                    font-size: 45px;
                    padding: 18px;
                    color: var(--gray);
                    font-weight: 500;
                    
                    & img {
                        width: 2em;
                        height: 2em;
                    }
                }
            </style>
            
            <div class="btn btn-home" data-href="">
                <img src="" alt="">
                <span></span>
                <p id="debug"></p>
            </div>
		`;

		// 3. Clona il contenuto del template e aggiungilo allo Shadow DOM
		shadow.appendChild(template.content.cloneNode(true));
	}

	// Passaggio 2: Gestisci gli attributi e i callback
	static get observedAttributes() {
		let array = [];

		HomeButton.watchedList.forEach(element => {
			array.push(element.attribute);
		})

		return array;
	}

	attributeChangedCallback(name, oldValue, newValue) {

		HomeButton.watchedList.forEach(element => {
			if (element.attribute === name) {
				let domElement = this.shadowRoot.querySelector(element.htmlElement);
				/*console.log(name, element, oldValue, newValue)
				console.log()*/
				if (domElement) {
					if (element.tagName !== "") {
						// console.log(domElement)
						domElement[element.tagName] = newValue;
						// console.log(domElement)
						// console.log("------------")
					} else {
						domElement.textContent = newValue;
					}
				}
			}
		})
	}

	connectedCallback() {
		let btn = this.shadowRoot.querySelector(".btn-home");
		// console.log(btn)
		if (btn) {
			btn.addEventListener("click", () => {
				console.log(btn[ "data-href"])
				window.location.href = btn.dataset.href;
			})
		}
	}
}

// Passaggio 3: Registra il tuo elemento personalizzato
customElements.define('home-button', HomeButton);