// map-markercluster-ui.js

export class MapMarkerClusterUI {
    constructor() {
        // Enthält alle Marker-, Cluster- und Popup-Styles aus stolperclean.css
        this.markerStyles = this.#getStyles(); 
    }

    /**
     * Injiziert die Marker- und Cluster-Styles in den <head> des Dokuments.
     * @public
     */
    injectIntoDOM() {
        if (!document.getElementById('marker-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'marker-styles';
            styleElement.textContent = this.markerStyles;
            document.head.appendChild(styleElement);
        }
    }

    /**
     * Gibt den CSS-String für alle Marker, Cluster und Popups zurück.
     * @private
     */
    #getStyles() {
        // HIER FÜGEN SIE ALLE REGELN VON POI-ICONS, CLUSTERN UND POPUPS EIN!
        return `

.poi-icon {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.poi-icon .fa-shield-alt {
    font-size: 24px;
    color: green;
    background: none;
    border: none;
}

.poi-icon.green {
    background-color: green;
}

.poi-icon.yellow {
    background-color: yellow;

}
.poi-icon.yellow .marker-fa-icon {
    /* Fügt eine schwarze Umrandung nur um die Dreiecksform des gelben Icons */
    filter: drop-shadow(0px 0px 2px black);
}

.poi-icon.orange {
    background-color: orange;
}

.poi-icon.red {
    background-color: red;
}

.poi-icon.gray {
    background-color: gray;
}

/* CSS für den Cluster */
.marker-cluster-style {
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.green-cluster {
    background-color: green;
    color: white;
}

.red-cluster {
    background-color: rgb(255, 0, 0);
    color: white;
}

.yellow-cluster {
    background-color: yellow;
    color: black;
}

.orange-cluster {
    background-color: orange;
    color: white;
}

.gray-cluster {
    background-color: gray;
    color: white;
}


/* Stellt sicher, dass der Haupt-Container des Markers absolut positioniert ist */
.leaflet-marker-icon.poi-icon {
    position: absolute !important;
}

.leaflet-marker-icon.poi-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.2s ease-out;
}

.poi-icon .marker-fa-icon {
    font-size: var(--icon-size, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
}

/* Stil für den aktiven (größeren) Marker */
.poi-icon.active-marker {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.poi-icon i.fas,
.poi-icon i.far {
    font-size: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poi-icon.active-marker i.fas,
.poi-icon.active-marker i.far {
    font-size: 30px;
}

.poi-icon {
    border: 2px solid;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

        `;
    }
}