"use strict";
import Scenari from './scenari.js';
import { showAlert, makeElementBounce } from './alerts.js';
import { luceTemplate } from './luci.js';

/**
 * activates all the toggles available
 */
function setToggleMovement(): void {
    const toggles = document.querySelectorAll('.toggle-button');
    console.log(toggles.length);//TODO remove this line if == 0
    for (const toggle of toggles) {
        setToggleMovement2(toggle as HTMLElement);
    }
};
/**
 * changes the state of the given toggle
 * @param {HTMLElement} toggle the toggle to move
 */
function setToggleMovement2(toggle: HTMLElement): void {
    toggle.addEventListener('click', event => {
        event.preventDefault();
        toggle.classList.toggle('active');
    }, false);
}
/**
 * edits the modal used for activating/deactivating a scenario when the user clicks on a toggle 
 * @param {HTMLElement} toggle the toggle to move
 * @param {string} scenarioID the id of the scenario which is being toggled
 */
function scenariToggleListener(toggle: HTMLElement, scenarioID: string): void {
    const registerBtn = document.getElementById('scenari-registra')!;
    toggle.addEventListener('click', event => {
        event.preventDefault();
        if (registerBtn.innerText !== "Registra") {//sto registrando
            showAlert("Attenzione", "Stai registrando uno scenario, termina la registrazione per attivare lo scenario.", false);
            makeElementBounce(registerBtn);
            return;
        }
        // select the option from the dropdown
        Scenari.addNameHere.value = scenarioID;
        // change text of the modal based on toggle state
        const modalBody = document.getElementById('attiva-scenari-modal')!.querySelector('.modal-body')!;
        const children = modalBody.children as HTMLCollectionOf<HTMLElement>;
        //p, fieldset, p.more-margin-top, p
        //0,    1,            2,          3
        const okBtn = document.getElementById('attiva-scenari-btn')!;
        if (toggle.classList.contains('active')) {
            children[0].innerText = "Disabilitando questo scenario, disabiliterai l'antifurto.";
            children[2].innerText = "Disabilitare lo scenario?";
            children[3].classList.add('invisible');
            okBtn.innerText = "Disabilita";
        }
        else {
            children[0].innerText = "Attivando questo scenario, abiliterai l'antifurto.";
            if (Scenari.scenarioAttivoToggle != null) {
                children[2].innerText = "Inoltre disabiliterai gli altri scenari attivi.";
                children[3].classList.remove('invisible');
            } else {
                children[2].innerText = "Continuare l'attivazione?";
                children[3].classList.add('invisible');
            }
            okBtn.innerText = "Attiva";
        }
        // launch the modal
        const modalLauncher = document.getElementById('launch-modal-' + scenarioID)!;
        modalLauncher.click();
    }, false);
}
/**
 * switches the toggle and updates the status of the light
 * @param {HTMLElement} toggle the toggle to move
 * @param {luceTemplate} luce the luce JSON luce (used to change its status)
 */
function luciToggleListener(toggle: HTMLElement, luce: luceTemplate): void {
    toggle.addEventListener('click', event => {
        event.preventDefault();
        toggle.classList.toggle('active');
        luce.stato = toggle.classList.contains('active');
        // TODO server send the toggle state
    }, false);
}

export { setToggleMovement, scenariToggleListener, luciToggleListener };