const TEMPLATE = document.createElement("template")
TEMPLATE.innerHTML = `
<style>
:host {
	display: inline-block;
	width: 3em;
	height: 3em;
	background: #404040;
}

#legend-container {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: color-mix(in srgb, var(--background-color, transparent), transparent 50%);

	box-sizing: border-box;
	border: solid 1px transparent;
	gap: 3px;
}

#legend-container[hidden] {
	display: none;
}

.marker-icon {
	max-height: 2em;
}

[data-n-marker="2"] .marker-icon {
	max-height: 1.25em;
}
</style>
<div id="legend-container">
	<img class="marker-icon" />
</div>
`

export class FeatureLegendElement extends HTMLElement {

	feature
	
	connectedCallback(){
		if(!this.shadow){
			this.shadow = this.attachShadow({mode: "open"})
			this.shadow.append(TEMPLATE.content.cloneNode(true))
		}
		this.updateContent()
	}

	updateContent(){
		let container = this.shadow.getElementById("legend-container")
		let marker = this.shadow.getElementById("marker-icon")
		container.hidden = !this.feature
		if(this.feature){
			let symbol = this.feature.mapSymbol
			container.style.setProperty("--background-color", symbol.backgroundColor || "transparent");
			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
			container.style.borderColor = symbol.borderColor || "transparent"

			let markers = document.createDocumentFragment()
			if(Array.isArray(symbol.markerUrl)){
				for(let markerUrl of symbol.markerUrl){
					let el = document.createElement("img")
					el.classList.add("marker-icon")
					el.src = markerUrl
					markers.append(el)
				}
			} else if(symbol.markerUrl){
				let el = document.createElement("img")
				el.classList.add("marker-icon")
				el.src = symbol.markerUrl
				markers.append(el)
			}
			container.dataset.nMarker = markers.children.length;
			container.replaceChildren(markers)
		}
	}
	
}

customElements.define("camp-feature-legend", FeatureLegendElement)