import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div, html, list, a, slot, input, h1 } 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",
            color: "red",
            linkClick: this.onClick1,
            linkClick2: this.onClick2,
            enter: this.onEnter,
        };
    }

    get styles() {
        return `
            .sheet {
                background-color: green;
                color: #fff;
            }
        `;
    }

    render() {
        return this.template
            .class(this.show)
            .child(
                new div(
                    new input().attribute("type", "text").onEnter(this.enter),
                    new h1(this.name),
                    new html("<h2>this is before</h2>"),
                    new div(
                        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>"),
                    new a("I go nowhere, but you can click me ;)")
                        .on("click", this.linkClick).on("click", this.linkClick2)
                        .style("color", this.color, "important")
                ).class("sheet")
            );
    }

    onClick1(event) {
        console.log("Element was clicked 1!");
    }

    onClick2(event) {
        console.log("Element was clicked 2!");
    }

    onEnter(event) {
        console.log("Enter was pressed!");
    }
}

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

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

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

export { SheetTemplate as Sheet };