Source: map/filters/FilterSettings.js

import { Window } from "../../ui/Window.js";
import "./FilterSettings.css";

export { FilterSettings }

/**
 * Base class for a window that allows
 * editing settings of a filter
 * 
 * @memberof vef.map.filters
 */
class FilterSettings extends Window {

    class = "filter-settings";
    html = `
        <form></form>
        <form action="javascript:void(0);" style="display:none;">
            <div><label><span class="input-label" style="width: 80px;">Headline: </span><input style="width: calc(100% - 80px);" type="text" name="title"/></label></div>
        </form>
        <form action="javascript:void(0);" style="display:block;">
            <div><label><input type="checkbox" name="deactivatable"/> Show Power Button</label></div>
        </form>
        <div class="layer-mode">Added Layers will be <span class="excluded-label">excluded</span> <i class="fas fa-toggle-on"></i><i class="fas fa-toggle-off"></i> <span class="included-label">included</span>:</div>
        <div class="layer-list">
            <div class="layer-list-inner"></div>
            <div class="layer-list-info"><i class="fas fa-file-import" style="color:var(--primary-color);"></i><br/>Drag & Drop<br/>Layers here</div>
        </div>
        <div class="button-group">
            <button class="btn-remove"><i class="fas fa-trash"></i> Delete</button>
            <button class="btn-copy"><i class="fas fa-copy"></i> Clone</button>
            <button class="btn-abort"><i class="fas fa-ban"></i> Abort</button>
            <button class="btn-apply"><i class="fas fa-check"></i> Apply</button>
        </div>
    `;

    /**
     * @param {FilterUi} filter
     */
    constructor(filter) {
        super(null, {
            height: "unset",
            width: "500px",
            open: false,
            draggable: true,
            responsive: true
        })

        this.events.apply = [];
        this.filter = filter;

        this.setClass(this.class);
        this.setContent(this.html);

        this.initEvents_();
    }

    initEvents_() {
        this.query(".button-group .btn-remove").addEventListener("click", () => {
            this.filter.fire("remove", this.filter);
            this.close();
        });
        this.query(".button-group .btn-copy").addEventListener("click", () => {
            this.filter.fire("copy", this.filter);
            this.close();
        });
        this.query(".button-group .btn-abort").addEventListener("click", () => {
            this.close();
        });
        this.query(".button-group .btn-apply").addEventListener("click", () => {
            const options = this.getFilterOptions();
            if (options) {
                this.fire("apply", options);
                this.close();
            }
        });

        this.query(".layer-mode").addEventListener("click", (e) => {
            e.preventDefault();
            if (e.currentTarget.classList.contains("excluded")) {
                e.currentTarget.classList.remove("excluded")
            } else {
                e.currentTarget.classList.add("excluded")
            }
        });

        const layerList = this.query(".layer-list");

        layerList.addEventListener("dragover", e => e.preventDefault());
        layerList.addEventListener('drop', e => {
            e.preventDefault();
            e.stopPropagation();
            this.addLayer_(e.dataTransfer.getData("layer_id"));
        })
    }

    addLayer_(id) {
        if (!id) return;
        if (this.query(".layer-list-inner .layer[data-id='" + id + "']")) return;

        let title = id;

        if (this.filter.layers_) {
            const layer = this.filter.layers_.getLayerById(id);
            if (!layer) return;
            title = layer.title;
        }

        const div = document.createElement("div");
        div.classList.add("layer");
        div.dataset.id = id;
        div.innerHTML = `
            <i class="fas fa-times btn-remove"></i>
            <span class="layer-title"></span>
        `;
        div.querySelector(".btn-remove").addEventListener("click", e => {
            div.remove();
        });

        const titleSpan = div.querySelector(".layer-title");
        titleSpan.title = title;
        titleSpan.innerText = title;

        this.query(".layer-list-inner").appendChild(div);
    }

    /**
     * Get the currently configured filter options
     */
    getFilterOptions() {
        const options = {
            title: this.options_.title,
            deactivatable: this.query("form input[name='deactivatable']").checked,
            excludeLayers: this.query(".layer-mode").classList.contains("excluded"),
            layers: []
        };

        const layers = this.queryAll(".layer-list-inner .layer");
        for (let i = 0; i < layers.length; ++i) {
            options.layers.push(layers[i].dataset.id)
        }

        return options;
    }

    /**
     * Update Ui based on the filters current options
     */
    updateFilterOptions() {
        const options = this.filter.options_;

        this.query("form input[name='title']").value = options.title;
        this.query("form input[name='deactivatable']").checked = options.deactivatable;

        const layerMode = this.query(".layer-mode");

        if (options.excludeLayers) {
            layerMode.classList.add("excluded");
        } else {
            layerMode.classList.remove("excluded");
        }


        this.query(".layer-list-inner").innerHTML = "";
        for (let i = 0; i < options.layers.length; ++i) {
            this.addLayer_(options.layers[i]);
        }
    }

}