"use strict";
import Luci from './luci.js';
import Antifurto from './antifurto.js';
import { setToggleMovement2 } from "./toggles.js";

class Scenari {
    static scenariContainer;
    static addNameHere;
    static initialized = false;
    static scenarioAttivoToggle = null;

    constructor() {
        Scenari.scenariContainer = document.getElementById('scenariContainer');
        Scenari.addNameHere = document.getElementById('p');
        Scenari.init();
        Scenari.modalListener();
    }

    static modalListener() {
        // anteprimaModal();
        Scenari.attivaModal();
        // registraModal();
        Scenari.antifurtoModal();
    }
    
    static attivaModal() {
        const modalForm = document.getElementById('attiva-scenari-form');
        modalForm.addEventListener('submit', event => {
            event.preventDefault();
            // the user has chosen to activate the scenario
            // I have to get to the toggle and activate it from the value of the select
            const toggle = document.getElementById(Scenari.addNameHere.value).querySelector('.toggle-button');
            const isActivatingNewScenario = toggle !== Scenari.scenarioAttivoToggle;
            
            // close the modal by clicking on the close button
            const closeBtn = document.getElementById('attiva-scenari-modal').querySelector('.btn.btn-danger');
            closeBtn.click();
            
            if(Scenari.scenarioAttivoToggle){
                // toggle the other activated scenario
                Scenari.scenarioAttivoToggle.classList.toggle('active');
                // TODO deactivate the scenarioAttivoToggle in the server

            }
            Scenari.scenarioAttivoToggle = toggle;

            const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
            if(isActivatingNewScenario){
                toggle.classList.add('active');
                // TODO activate the new scenario in the server

                // set the antitheft status for the on-screen button
                antifurtoBtn.innerText = 'ON';
                antifurtoBtn.classList.remove('btn-danger');
                antifurtoBtn.classList.add('btn-success');
            } else {
                toggle.classList.remove('active');
                Scenari.scenarioAttivoToggle = null;
                // TODO deactivate the scenario in the server

                // set the antitheft status for the on-screen button
                antifurtoBtn.innerText = 'OFF';
                antifurtoBtn.classList.remove('btn-success');
                antifurtoBtn.classList.add('btn-danger');
            }

            
        }, false);
    }

    static antifurtoModal() {
        // not yet implemented
    }

    static init() {
        const scenariBtn = document.getElementById('mainButtonContainer').children[1];
        scenariBtn.addEventListener('click', event => {
            event.preventDefault();
            Scenari.toggleContainer(true);
            Luci.toggleContainer(false);
            Antifurto.toggleContainer(false);
            if (!Scenari.initialized)
                Scenari.fillTable();
            Scenari.initialized = true;
        }, false);

        const registerBtn = document.getElementById('scenari-registra');
        registerBtn.addEventListener('click', event => {
            event.preventDefault();
            // TODO choose how to register the scenario
        }, false);

        
        // TODO get antifurto status from server
        // const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
        // antifurtoBtn.innerText = 'ON';
        // antifurtoBtn.classList.remove('btn-danger');
        // antifurtoBtn.classList.add('btn-success');

        // antifurtoBtn.addEventListener('click', () => {
        //     // when it's called, the modal is shown
        // }, false);
    }

    static fillTable() {
        // TODO get all scenari from server
        var scenari = [
            {
                "nome": "Natale",
                "data": "2018-12-25",
            },
            {
                "nome": "Festa della Repubblica",
                "data": "2019-06-02",
            }
        ];//FIXME remove this test

        const tableBody = document.getElementById('table-row-scenari');
        
        var index = 0;
        for(const scenario of scenari) {
            const row = document.createElement('tr');
            const name = 'scenario-' + index;
            row.id = name
            row.innerHTML = `<th scope="row">${scenario.nome}</th>
                            <td>
                                <span>${scenario.data}</span>
                            </td>
                            <td>
                                <h5>
                                    <span class="badge rounded-pill bg-secondary">anteprima</span>
                                </h5>
                            </td>
                            <td>
                                <div class="switch-container no-box-sizing">
                                    <div class="toggle-button no-box-sizing">
                                        <div class="inner-circle no-box-sizing"></div>
                                    </div>
                                </div>
                                <span id="launch-modal-${name}" data-bs-toggle="modal" data-bs-target="#attiva-scenari-modal"></span>
                            </td>`;
            
            const lastRow = tableBody.lastElementChild;
            tableBody.insertBefore(row, lastRow);
            
            const anteprimaBtn = row.querySelector('.badge.rounded-pill');
            anteprimaBtn.addEventListener('click', event => {
                event.preventDefault();
                // TODO define how to show preview
            }, false);

            const optionName = document.createElement('option');
            optionName.value = name;
            optionName.innerText = scenario.nome;
            Scenari.addNameHere.appendChild(optionName);
            
            const toggle = row.querySelector('.toggle-button');
            toggle.addEventListener('click', event => {
                event.preventDefault
                // select the option from the dropdown
                Scenari.addNameHere.value = name;
                // change text of the modal based on toggle state
                const modalBody = document.getElementById('attiva-scenari-modal').querySelector('.modal-body');
                const children = modalBody.childNodes;
                //text, p, text, fieldset, text, p.more-margin-top, text, p, text
                //0,    1,   2,     3,      4,        5,              6,  7,  8
                const okBtn = document.getElementById('attiva-scenari-form').querySelector('.btn.btn-success');
                if(toggle.classList.contains('active')){
                    children[1].innerText = "Disabilitando questo scenario, disabiliterai l'antifurto.";
                    children[5].innerText = "Disabilitare lo scenario?";
                    children[7].classList.add('invisible')
                    okBtn.innerText = "Disabilita";
                }
                else{
                    children[1].innerText = "Attivando questo scenario, abiliterai l'antifurto.";
                    if(Scenari.scenarioAttivoToggle != null){
                        children[5].innerText = "Inoltre disabiliterai gli altri scenari attivi.";
                        children[7].classList.remove('invisible')
                    } else {
                        children[5].innerText = "Continuare l'attivazione?";
                        children[7].classList.add('invisible')
                    }
                    okBtn.innerText = "Attiva";
                }
                // launch the modal
                const modalLauncher = document.getElementById('launch-modal-' + name);
                modalLauncher.click();
            }, false);
            index++;
        }
    }

    // toggle the visibility of the scenari container
    static toggleContainer(visible) {
        if (visible) {
            this.scenariContainer.classList.remove('invisible');
        } else {
            this.scenariContainer.classList.add('invisible');
        }
    }



}

export default Scenari;