export class Component {
	constructor() {
		this._component_name = Object.getPrototypeOf(this).constructor.name
		this._template = document.createElement('template')
		this._debug = (sessionStorage.getItem('debug') === 'true')
	}
	render() {
		const component = this.renderComponent()

		if (typeof component[Symbol.iterator] === 'function')
			this._template.content.replaceChildren(...component)
		else
			this._template.content.replaceChildren(component)

		for (const e of this._template.content.children) {
			e.setAttribute('data-component-name', this._component_name)

			if (this._debug) {
				e.setAttribute('data-tooltip', this._component_name)
				e.classList.add('tooltip')
				e.classList.add('left')

				e.addEventListener('mouseover', event => {
					if (event.target !== e)
						return
					e.style.border = '1px solid #f0f';
				})

				e.addEventListener('mouseout', event => {
					if (event.target !== e)
						return
					e.style.border = 'none';
				})
			}
		}

		return this._template.content
	}
}