import { Controller } from "@hotwired/stimulus"

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

    /**
     * @param {Event} event 
     */
    toggle(event) {
        let map = window.LMap;
        let target = event.currentTarget;
        const id = target.parentElement.getAttribute('data-id');
        const layers = {
            'siti': window.Sites,
            'non-conser': window.NotConserved,
            'rinv': window.Findings,
            'preist': window.Prehistoric,
            'subacquei': window.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');
    }
}

