import "./feature-legend.js"

const TEMPLATE = document.createElement("template")
TEMPLATE.innerHTML = `
<camp-feature-legend class="feature-legend"></camp-feature-legend>
<h2 class="feature-name"></h2>
<small class="feature-location"></small>
`

export class FeatureShortHeaderElement extends HTMLElement {

	#feature

	get feature(){
		return this.#feature
	}

	set feature(value){
		this.#feature = value
		let legend = this.querySelector(".feature-legend")
		if(legend)
			legend.feature = value
	}

	connectedCallback(){
		this.updateContent()
	}

	updateContent(){
		if(!this.feature){
			this.replaceChildren()
		} else {

			this.replaceChildren(TEMPLATE.content.cloneNode(true))
			
			this.querySelector(".feature-legend").feature = this.feature
			this.querySelector(".feature-legend").updateContent()
			
			this.querySelector(".feature-name").textContent = 
				this.feature?.properties?.name || 
				this.feature.mapSymbol.genericName || 
				this.feature.id

			let featurePoint = this.feature.asPoint()

			this.querySelector(".feature-location").textContent =
				this.feature?.properties?.["location-description"] ||
				`${featurePoint.geometry.coordinates[1]}, ${featurePoint.geometry.coordinates[0]}`
		}
	}

}

customElements.define("camp-feature-short-header", FeatureShortHeaderElement)