Source: map/popup/PopupHeader.js

import { UiElement } from "../../ui/UiElement.js";
import "./PopupHeader.css";

/**
 * Represents the header component of a popup.
 * @extends UiElement
 * @memberof vef.map.popup
 */
class PopupHeader extends UiElement {

    class_ = ["popup-header"];
    html_ = `
        <div class="popup-header-inner">
            <div class="popup-header-item popup-header-label"></div>
            <div class="popup-header-item popup-header-title"></div>
            <div class="popup-header-dropdown"></div>
        </div>
    `;

    itemTemplate_ = `
        <div class="popup-item-title"></div>
        <div class="popup-item-counter"></div>
    `;

    layers = {};
    index = 0;

    /**
     * Constructs a new PopupHeader instance.
     * @param {HTMLElement} target - The target element to attach the popup header to.
     */
    constructor(target) {

        super(target, {
            "show_index": []
        });

        this.setHtml(this.html_);
        this.setClass(this.class_);
    }

    /**
     * Resets the popup header to its initial state.
     */
    reset() {
        this.off("show_index");
        this.getElement().classList.remove("dropdown-enabled");
        this.query(".popup-header-dropdown").innerHTML = "";
        this.query(".popup-header-label").innerHTML = "";
        this.query(".popup-header-title").innerHTML = "";
        this.index = 0;
        this.layerCount = 0;
        this.layers = {};
    }

    /**
     * Adds a layer to the popup header.
     * @param {Object} layer - The layer to add.
     */
    addLayer(layer) {
        const index = this.index++;

        if (layer.uniqueId in this.layers) {
            ++this.layers[layer.uniqueId].counter;
            return;
        }

        this.layers[layer.uniqueId] = {
            layer: layer,
            startIndex: index,
            counter: 1
        };
    }

    /**
     * Sets the active layer in the popup header.
     * @param {Object} layer - The layer to set as active.
     * @param {string} [title] - The title to display for the active layer.
     */
    setLayer(layer, title) {
        const items = this.queryAll(".popup-header-dropdown .popup-item");
        for (let i = 0; i < items.length; ++i) {
            items[i].style.display = (items[i].dataset.id == layer.uniqueId) ? "none" : "flex";
        }

        let background = null;
        let color = null;

        if (typeof layer.popupCounter == "string") {
            background = layer.popupCounter;
        } else if ((typeof layer.popupCounter == "object") && (layer.popupCounter !== null)) {
            background = layer.popupCounter.background || null;
            color = layer.popupCounter.color || null;
        }

        const headerLabel = this.query(".popup-header-label");
        const options = {
            title: title || layer.title,
            counter: this.layers[layer.uniqueId].counter,
            chevron: true,
            backgroundColor: background,
            color: color
        };
        this.setItemContent_(headerLabel, options);

        const headerTitle = this.query(".popup-header-title");
        options.title = layer.title;
        this.setItemContent_(headerTitle, options);
    }

    /**
     * Initializes the dropdown menu in the popup header.
     */
    initDropdown() {
        if (Object.keys(this.layers).length == 1) return;
        this.getElement().classList.add("dropdown-enabled");

        const dropdown = this.query(".popup-header-dropdown");
        for (let key in this.layers) {
            const dropdownItem = document.createElement("div");
            dropdownItem.classList.add("popup-item");
            dropdownItem.dataset.id = key;
            dropdownItem.style.display = "none";

            const layer = this.layers[key].layer;
            let background = null;
            let color = null;
    
            if (typeof layer.popupCounter == "string") {
                background = layer.popupCounter;
            } else if ((typeof layer.popupCounter == "object") && (layer.popupCounter !== null)) {
                background = layer.popupCounter.background || null;
                color = layer.popupCounter.color || null;
            }

            this.setItemContent_(dropdownItem, {
                title: layer.title,
                counter: this.layers[key].counter,
                backgroundColor: background,
                color: color
            });

            dropdownItem.addEventListener("click", e => {
                this.fire("show_index", this.layers[key].startIndex);
            })

            dropdown.appendChild(dropdownItem);
        }
    }

    /**
     * Sets the content of a popup item element.
     * @param {HTMLElement} element - The popup item element.
     * @param {Object} options - The options for the item content.
     * @param {string} options.title - The title of the item.
     * @param {number} options.counter - The counter value of the item.
     * @param {boolean} [options.chevron] - Whether to display a chevron icon.
     */
    setItemContent_(element, options) {
        element.innerHTML = this.itemTemplate_;
        element.title = options.title;
        element.querySelector(".popup-item-title").innerText = options.title;
        if (options.chevron) element.insertAdjacentHTML("beforeend", '<div class="popup-item-chevron"><i class="fas fa-chevron-down"></i></div>');

        const counter = element.querySelector(".popup-item-counter");
        counter.innerText = options.counter;

        if (options.backgroundColor) {
            counter.style.backgroundColor = options.backgroundColor;
        } else if (counter.style.backgroundColor) {
            delete counter.style.backgroundColor;
        }

        if (options.color) {
            counter.style.color = options.color;
        } else if (counter.style.color) {
            delete counter.style.color;
        }
    }

}

export { PopupHeader };