import { Controller } from "@hotwired/stimulus";
import { GisState } from "../state.js";

export default class extends Controller {
    static targets = ['sites', 'findings', 'notconserved', 'prehist',];

    /**
     * @todo Use Stimulus values?
     * @param {Event} event 
     */
    toggle(event) {
        let map = GisState.map;
        let target = event.currentTarget;
        const id = target.parentElement.getAttribute('data-id');
        const layers = {
            'siti': GisState.layers.sites,
            'non-conser': GisState.layers.notConserved,
            'rinv': GisState.layers.findings,
            'preist': GisState.layers.prehistoric,
            'subacquei': GisState.layers.underwater,
        }

        let group = layers[id];
        this.toggleIcon(event.currentTarget);

        if (map.hasLayer(group)) {
            map.removeLayer(group);
            target.title = "Mostra";
        }
        else {
            map.addLayer(group);
            target.title = "Nascondi";
        }
    }
    /**
     * Toggle visibility icon...
     * @param {HTMLElement} target
     */
    toggleIcon(target) {
        const icon = target.firstElementChild;
        const className = icon.className;
        icon.className = className.includes('slash') ?
            className.replace('-slash', '') :
            className.replace('eye', 'eye-slash');
    }
}