import * as theme from '../theme.js'
import { create as create_element } from './index.js'

export class Container extends HTMLElement {
	constructor(options) {
		super();

		this.body = this.attachShadow({ mode: 'closed' });
		this.body.adoptedStyleSheets = (options?.css ?? []).concat(theme.css());

		(options?.children ?? (() => []))().forEach(child => this.body.append(child))
	}

	static new(options) {
		if (!this.__sfw_tag) {
			this.__sfw_tag = this.__sfw_tag
				?? 'sfw-' + this.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

			customElements.define(this.__sfw_tag, this);
		}

		return create_element(this.__sfw_tag, options);
	}
}