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

const html = String.raw;

export default class extends Controller {
    static targets = [
        'search',
        'results',
        'clear',
        'container',
    ];
    
    /**
     * 
     * @param {Event} event 
     */
    async submitSearch(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        const body = {};

        for (const entry of data.entries()) {
            body[entry[0]] = entry[1];
        }

        const response = await fetch(`${GisState.apiUrl}/search?` + new URLSearchParams(body));
        const results = await response.json(); 

        this.containerTarget.classList.remove('is-hidden');
        this.#injectResults(results);
        if (results.length) this.#filterMap(results);
    }

    clearSearch() {
        const map = GisState.map;

        // Restore layer groups in map
        for (const key of Object.keys(GisState.layers)) {
            map.addLayer(GisState.layers[key]);
        }

        // Empty result set
        this.resultsTarget.innerHTML = '';
        this.containerTarget.classList.add('is-hidden');
    }

    #injectResults(results) {
        /**
         * @type {HTMLOutputElement} output
         */
        const output = this.resultsTarget;
        output.innerHTML = '';

        if (results.length === 0) {
            output.innerHTML = html`
                <p class="has-background-white-bis p-4 mt-0 has-text-centered">
                    Nessun risultato trovato per i parametri di ricerca
                </p>
            `;
        }

        const sites = GisState.markers.sites;

        for (const result of results) {
            let coordinates = ''
            for (let key of Object.keys(sites)) {
                if (sites[key].options.data.label === result.label) {
                    coordinates = key;
                }
            }

            // TODO The group value should be dynamic!!
            const item = html`
                <tr>
                    <td class="pt-4">${result.label}</td>
                    <td>
                        <button class="button is-link"
                            data-controller="marker"
                            data-action="marker#go"
                            data-marker-coords-value="${coordinates}"
                            data-marker-group-value="sites">
                            Vai al sito
                            <span class="ml-1 icon">
                                <i class="fa fa-chevron-right"></i>
                            </span>
                        </button>
                    </td>
                </tr>
            `;

            output.innerHTML += item;
        }
    }
    /**
     * 
     * @param {Array<Object>} results 
     */
    #filterMap(results) {
        const map = GisState.map;
        const labels = [];
        results.forEach(r => labels.push(r.label));

        // Remove all layer groups first
        for (const key of Object.keys(GisState.layers)) {
            map.removeLayer(GisState.layers[key]);
        }

        const sites = GisState.markers.sites;

        for (let key of Object.keys(sites)) {
            // If map has layers from previous search results...
            map.removeLayer(sites[key]);
            for (const label of labels) {
                if (sites[key].options.data.label === label) {
                    map.addLayer(sites[key]);
                }
            }
        }
    }
}