import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div, html, list, a, slot } from './ignite-template.js';

class Sheet extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            show: false,
            items: ["1", "2"],
            href: "www.google.com",
            name: "default content"
        };
    }

    render() {
        return this.template
            .class(this.show)
            .child(
                new div(
                    new html("<h2>this is before</h2>"),
                    new list(this.items, (item) => {
                        return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
                    }),
                    new html("<h2>this is after</h2>"),
                    new html("<h3>---- begin sheet's slot ----<h3>"),
                    new slot(this),
                    new html("<h3>---- end of slot ----</h3>")
                )
            );
    }
}

class SheetTemplate extends IgniteTemplate {
    constructor(...items) {
        super(items);

        this.tagName = "md-sheet";
    }
}

customElements.define("md-sheet", Sheet);

export { SheetTemplate as Sheet };