// Global ATON
import { Controller } from "@hotwired/stimulus"
import AppState from "../state.js";
import { createExposureSlider, createLightSlider } from "../utils/environment.js";

const html = String.raw;
const panelHeader = html`
    <i class="bi bi-gear-fill me-1"></i> Impostazioni
`;

export default class extends Controller {
    static targets = ['settings', 'fullscreen'];

    connect() {
        console.log('#toolbar controller connected');
    }
    /**
     * Open settings panel
     * @param {Event} event 
     */
    toggleSettings(event) {
        ATON.UI.setSidePanelLeft();
        ATON.UI.showSidePanel({header: panelHeader});
        this.#buildSettingsPanel(ATON.UI.elSidePanel);
    }
    toggleFullscreen() {
        /**
         * @type {HTMLAnchorElement}
         */
        const target = this.fullscreenTarget;
        const icon = target.querySelector('i');
        if (!document.fullscreenElement) {
            document.body.requestFullscreen();
            icon.classList.remove('bi-fullscreen');
            icon.classList.add('bi-fullscreen-exit');
            target.title = 'Esci da schermo intero';
        } else {
            document.exitFullscreen();
            icon.classList.remove('bi-fullscreen-exit');
            icon.classList.add('bi-fullscreen');
            target.title = 'Attiva schermo intero';
        }
    }
    /**
     * Clone a <template> by id
     * @param {String} id
     * @returns {DocumentFragment}
     */
    #cloneTemplate(id) {
        return document.getElementById(id).content.cloneNode(true);
    }
    /**
     * Create the left-side settings panel
     * content
     * @param {Element} panel 
     */
    #buildSettingsPanel(panel) {
        const fragment = this.#cloneTemplate('tmpl-settings');
        let sliderContainer = fragment.querySelector('[data-sliders-container]');
        let exposureContainer = fragment.querySelector('[data-slider-exposure-container]'); 

        ['x', 'y', 'z'].forEach((axis, i) => {
            const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
            sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
        })

        exposureContainer.appendChild(createExposureSlider('Valore', [0, 5]));

        panel.appendChild(fragment);
    }
}