import { AppService } from '../../global/app-service';
export class AppComponents {
    constructor() {
        this.appService = AppService.instance;
        this.components = this.appService.components;
    }
    render() {
        let router = document.getElementsByTagName('ema-router')[0];
        router.getState().then((routerState) => {
            let tag = routerState.context.params.name;
            this.components.map((comp) => {
                if (comp.tag === tag) {
                    this.component = comp;
                    this.currentTag = tag;
                    if (!comp.methods) {
                        comp.methods = [];
                    }
                }
            });
        });
        return (h("div", null,
            h("ema-layout", { class: 'layout-header-sidebar20-content80-footer', "grid-gap": '0px', "padding-style": '0px 15px 15px 0px' },
                h("header", null, " "),
                h("aside", null,
                    h("h5", { class: 'text-center' }, "- webcomponents -"),
                    h("ul", { class: "list-group" }, this.components.map((item, i) => {
                        return h("li", { class: 'list-group-item' },
                            h("ema-route-link", { url: '/components/' + item.tag }, item.tag));
                    }))),
                this.currentTag &&
                    h("article", null, this.component &&
                        h("div", null,
                            h("ema-layout", { class: 'layout-header-content50-sidebar50-footer', "grid-gap": '0px', "padding-style": '0px 15px 15px 0px' },
                                h("header", null,
                                    h("h5", null, '<' + this.currentTag + '>')),
                                h("article", null,
                                    this.component.props &&
                                        h("div", null,
                                            h("h6", null, "html properties:"),
                                            h("ul", { class: 'props list-unstyled' }, this.component.props.map((prop, i) => {
                                                return h("li", { class: 'prop' },
                                                    '• ' + prop.attr + ' : ',
                                                    h("span", null, prop.type.toLowerCase()));
                                            }))),
                                    this.component.methods &&
                                        h("div", null,
                                            h("h6", null, "javascript methods:"),
                                            h("ul", { class: 'methods list-unstyled' }, this.component.methods.map((prop, i) => {
                                                return h("li", { class: 'method' }, '• ' + prop.name + '()');
                                            }))),
                                    this.component.events &&
                                        h("div", null,
                                            h("h6", null, "javascript events:"),
                                            h("ul", { class: 'events list-unstyled' }, this.component.events.map((prop, i) => {
                                                return h("li", { class: 'event' },
                                                    '• ' + prop.event + ' : ',
                                                    h("span", null, "event"));
                                            }))),
                                    this.component.dependencies &&
                                        h("div", null,
                                            h("h6", null, "dependencies:"),
                                            h("ul", { class: 'dependencies list-unstyled' }, this.component.dependencies.map((prop, i) => {
                                                return h("li", { class: 'dependencie' }, '• ' + prop);
                                            })))),
                                h("aside", { class: 'demos' },
                                    h("ema-demo", { tag: this.currentTag }))))),
                !this.currentTag &&
                    h("article", { class: 'container mt-2' },
                        h("ema-layout", { class: 'layout-grid-fill flip-board mt-3', "grid-gap": '10px', "cell-width": "225px", "cell-height": "166px" }, this.components.map((item) => {
                            return h("ema-card", { class: 'text-center component-card' },
                                h("ema-card-header", null,
                                    h("span", { class: "ema-card-header-title" }, '<' + item.tag + '>')),
                                h("ema-card-content", { class: "ema-card-header-subtitle" },
                                    h("div", null, item.componentPath.split('/')[item.componentPath.split('/').length - 1])),
                                h("ema-card-bottom", null,
                                    h("ema-route-link", { url: '/components/' + item.tag },
                                        h("button", { class: 'btn btn-primary' }, "example"))));
                        }))))));
    }
    static get is() { return "ema-app-components"; }
    static get properties() { return {
        "currentTag": {
            "state": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-components:**/"; }
}
