// 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'];

    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);
    }
    /**
     * 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);
    }
}