import "./feature-short-header.js"
import FEATURE_WIDGETS from "../feature-widgets/feature-widgets.js"

const TEMPLATE = document.createElement("template")
TEMPLATE.innerHTML = `
<camp-feature-short-header class="feature-header" ></camp-feature-short-header>
<div class="feature-widgets"></div
`

export class FeatureElement extends HTMLElement {

	feature

	connectedCallback(){
		this.updateContent()
	}

	updateContent(){
		this.replaceChildren(TEMPLATE.content.cloneNode(true))

		let header = this.querySelector("camp-feature-short-header")
		header.feature = this.feature
		header.updateContent()

		let widgetContainer = this.querySelector(".feature-widgets");
		for(let widgetFn of FEATURE_WIDGETS){
			let result = widgetFn(this.feature);
			if(result !== undefined && result !== null){
				widgetContainer.append(result)
			}
		}
	}

}

customElements.define("camp-feature", FeatureElement)