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 values = {
        'coords': String,
        'group': String,
        'id': String,
    };

    static targets = ['search', 'results'];
    
    /**
     * 
     * @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("https://caprigis-api.ddev.site:33001/search?" + new URLSearchParams(body));
        const results = await response.json(); 

        console.debug(results);

        this.#injectResults(results);
        this.#filterMap(results);
    }

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

        for (const result of results) {
            const item = html`
                <p class="p-1">${result.label}</p>
            `;

            output.innerHTML += item;
        }
    }

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

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