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');
        this.toggleIcon(event.currentTarget);

        let group = GisState.layers[id];

        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');
    }
}

