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

export default class extends Controller {
    static targets = [
        'list',
        'menu',
        'cartography',
        'icon'
    ];

    static values = {
        'cartography' : String,
        'main' : String,
    };

    buildMenu() {
        const groups = Object.keys(GisState.markers);
        const municipalities = ['Anacapri', 'Capri'];

        // TODO refactor with Stimulus values?
        for (let group of groups) {
            for (let municipality of municipalities) {
                let ul = this.renderMenuItems(group, municipality);
                document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
                    ?.appendChild(ul);
            }
        }
    }
    /**
     * 
     * @param {String} group 
     * @param {String} municipality 
     */
    renderMenuItems(group, municipality) {
        const ul = document.createElement('ul');
        ul.className = 'is-hidden';
        ul.id = `${group}-${municipality.toLowerCase()}-sub`;

        const template = document.getElementById('menu-item-template');

        for (let key in GisState.markers[group]) {
            const marker = GisState.markers[group][key];
            if (marker.options.municipality === municipality) {
                const clone = template.content.cloneNode(true);
                const link = clone.querySelector('a');

                link.dataset.markerCoordsValue = key;
                link.dataset.markerGroupValue = group;
                link.textContent = marker.options.label;

                ul.appendChild(clone);
            }
        }

        return ul;
    }

    buildCartographyMenu() {
        const historicCadastre = GisState.cartography.historic;
        const template = document.getElementById('cartography-item-template');
        const ul = document.createElement('ul');
        ul.className = 'menu-list';
        ul.id = 'historic-sub';

        const aside = document.querySelector('[data-id="cartography-aside"]');

        for (let geoImage of historicCadastre) {
            const clone = template.content.cloneNode(true);
            const label = clone.querySelector('label');
            const checkbox = clone.querySelector('input[type="checkbox"]');

            checkbox.dataset.layerIdValue = geoImage.id;
            checkbox.dataset.layerTypeValue = 'historic';
            const span = document.createElement('span');
            span.className = 'pl-3';
            span.textContent = geoImage.label;
            label.appendChild(span);

            ul.appendChild(clone);
        }

        aside.appendChild(ul);
    }

    toggleMenu(event) {
        const menuId = event.target.dataset.id;

        // Stupid...
        if (menuId === 'main') {
            this.menuTarget.classList.toggle('is-hidden');
            if (!this.cartographyTarget.classList.contains('is-hidden')) {
                this.cartographyTarget.classList.add('is-hidden');
            }
        }

        if (menuId === 'cartography') {
            this.cartographyTarget.classList.toggle('is-hidden');
            if (!this.menuTarget.classList.contains('is-hidden')) {
                this.menuTarget.classList.add('is-hidden');
            }
        }
    }

    close() {
        this.menuTarget.classList.add('is-hidden');
    }

    toggleList(id) {
        document.querySelector(`#${id}`).classList.toggle('is-hidden');
    }

    openSubList(event) {
        const target = event.currentTarget;
        const targetIcon = target.querySelector('.fa');
        const id = target.getAttribute('data-list-id');
        this.toggleList(id);
        this.toggleIcon(targetIcon);
    }

    toggle(event) {
        const target = event.currentTarget; 
        const targetIcon = target.querySelector('.fa');
        const id = target.getAttribute('data-id');
        const listId = `${id}-list`;
        const list = this.listTargets.find(t => t.id === listId);

        if (list) {
            list.classList.toggle('is-hidden');
        }

        this.toggleIcon(targetIcon);
    }

    toggleIcon(icon) {
        if (icon.classList.contains('fa-chevron-right')) {
            icon.classList.remove('fa-chevron-right');
            icon.classList.add('fa-chevron-down');
        } else {
            icon.classList.add('fa-chevron-right');
            icon.classList.remove('fa-chevron-down');
        }

        return icon;
    }
}