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: row;
	justify-content: center;
	align-items: center;

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

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

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

#marker-icon:not([src]) {
	display: none;
}
</style>
<div id="legend-container">
	<img id="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.backgroundColor = symbol.backgroundColor || "transparent"
			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
			container.style.borderColor = symbol.borderColor || "transparent"
			if(symbol.markerUrl){
				marker.src = symbol.markerUrl
			} else {
				marker.removeAttribute("src")
			}
		}
	}
	
}

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