import { IgniteElement } from '../../ignite-html/ignite-element.js';
import { h1, IgniteTemplate, slot, div, p, list, h3, h4, h5, br } from '../../ignite-html/ignite-template.js';
import { RowAccordian } from '../row-accordian.js';

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

    get properties() {
        return {
            functions: [
                {
                    name: "constructor(items..)",
                    description: "Initializes the template and adds items passed as children elements. Items are treated exactly the same as calling .child()"
                },
                {
                    name: "child(items...)",
                    description: "Adds a child element to a template. Strings and properties are valid inputs and will be treated as html automatically."
                }
            ]
        }
    }

    render() {
        return this.template
            .child(
                new RowAccordian()
                    .property("title", "It all starts with a template!")
                    .child(
                        new div(
                            new h4("Templates are a blueprint for how to construct a element. In Ignite everything starts with a template. The following are functions that can be used on templates:"),
                            new br(),
                            new list(this.functions, (item) => {
                                return new div(
                                    new h4(`<i class="fas fa-function"></i> .`, item.name),
                                    new h5(item.description),
                                    new br()
                                )
                            })
                        )
                    )
                    .style("display", "flex")
                    .style("flex-direction", "column")
                    .style("align-items", "center")
            );
    }
}

class Example1Template extends IgniteTemplate {
    constructor(...params) {
        super(...params);

        this.tagName = "example-1";
    }
}

customElements.define("example-1", Example1);

export {
    Example1Template as Example1
}