"use strict";
import Antifurto from "./antifurto.js";
import Scenari from "./scenari.js";
import { setToggleMovement2 } from "./toggles.js";

class Luci {
    static luciContainer;

    constructor() {
        Luci.luciContainer = document.getElementById('luciContainer');
        Luci.init();
        Luci.modalListener();
    }

    static modalListener() {
        const select = document.getElementById('luogoLuce');
        const altroInput = document.getElementById('nuovaStanzaDIV');
        const form = document.getElementById('search-form');

        // show or hide the text input for the new room
        select.addEventListener('change', event => {
            event.preventDefault();
            const selected = event.target.value;
            const altroClassList = altroInput.classList;

            selected === 'altro' ? altroClassList.remove('invisible') : altroClassList.add('invisible');
        }, false);

        form.addEventListener('submit', event => {
            event.preventDefault();

            const selectedValue = select.value;
            if (selectedValue === "unselected") {
                alert("Selezionare una stanza");
                return
            }
            var stanza = select.options[select.selectedIndex].text.trim(); // get selected option text

            if (selectedValue === "altro") {
                const nuovaStanza = altroInput.querySelector('#nuovaStanza').value.trim();
                if (nuovaStanza == null || nuovaStanza == "") {
                    alert("Inserire una stanza");
                    return
                }
                stanza = nuovaStanza;
            }
            stanza = stanza[0].toUpperCase() + stanza.substring(1, stanza.length);
            // TODO send stanza to server

            // add stanza to table
            const table = document.getElementById('table-row-luci');
            const row = document.createElement('tr');
            row.innerHTML = `<th scope="row">${stanza}</th>
                                <td>
                                    <div class="switch-container no-box-sizing">
                                        <div class="toggle-button no-box-sizing">
                                            <div class="inner-circle no-box-sizing" />
                                        </div>
                                    </div>
                                </td>`
            const lastRow = table.lastElementChild;
            table.insertBefore(row, lastRow);
            // add listener for switch
            const toggle = row.querySelector('.toggle-button');
            setToggleMovement2(toggle);
            // close modal
            const closeBtn = document.querySelector('#luci-modal .btn-close');
            closeBtn.click();
        }, false);
    }

    static init() {
        const luciBtn = document.getElementById('mainButtonContainer').children[0];
        luciBtn.addEventListener('click', event => {
            event.preventDefault();
            Luci.toggleContainer(true);
            Scenari.toggleContainer(false);
            Antifurto.toggleContainer(false);
        }, false);
        
    }

    static fillTable(){
        // TODO get all luci from server
    }

    // toggle the visibility of the luci container
    static toggleContainer(visible) {
        if (visible) {
            Luci.luciContainer.classList.remove('invisible');
        } else {
            Luci.luciContainer.classList.add('invisible');
        }
    }

}

export default Luci;