import { BaseWebcomponent } from '../../../global/base-webcomponent';
import { AppService } from '../../../global/app-service';
import { Api, ConfigService, Translate, DomUtil } from '../../../lib/index';
export class AppDev extends BaseWebcomponent {
    constructor() {
        super();
        this.authenticated = false;
        this.clientId = 'e-be';
        this.app = AppService.instance;
        this.api = new Api();
        this.config = ConfigService.instance;
        this.translation = new Translate();
        this.translation.use('nl-NL');
        this.data = this.app.data;
    }
    runTests() {
        console.log(DomUtil.getAttributes(document.getElementsByTagName('ema-modal')[0]));
    }
    debuggerTest() {
        let emaDebugger = document.querySelector('ema-debugger');
        emaDebugger.open();
        let i = 0;
        setInterval(() => {
            if (i <= this.data.dwpData.length - 1) {
                emaDebugger.dataJson = JSON.stringify(this.data.dwpData[i]);
                i++;
            }
        }, 1500);
    }
    componentDidLoad() {
    }
    render() {
        return (h("div", null,
            h("div", { class: 'container' }, this.data &&
                h("div", null,
                    h("ema-tabs", null,
                        h("ema-tab-header", { slot: "header", name: "tab1" }, "Dev"),
                        h("ema-tab-content", { slot: "content", name: "tab1" },
                            h("div", { class: "btn-group mb-3", role: "group", "aria-label": "Basic examples" },
                                h("button", { class: 'btn ', onClick: ev => this.runTests() }, "Run tests"),
                                h("button", { class: 'btn ', onClick: ev => this.debuggerTest() }, "Open debugger"),
                                h("button", { class: 'btn ', onClick: ev => document.getElementById('login-modal')['show']() }, "Login modal"),
                                h("button", { class: 'btn ', onClick: () => this.app.showFlashMessage('zis is ze message', 'secondary', 3000) }, "Show flashmessage"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').alert('yep') }, "Alert"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').confirm('Are you sure?') }, "Confirm"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').notice('Notice content') }, "Notice"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').popup() }, "Popup"),
                                h("button", { class: 'btn ', onClick: ev => DomUtil.fadeIn(document.getElementById('logo')) }, "fIn"),
                                h("button", { class: 'btn ', onClick: ev => DomUtil.fadeOut(document.getElementById('logo')) }, "fOut")),
                            h("ema-collapsible", { label: 'config', collapsed: true },
                                h("ema-json-viewer", { "json-url": '/assets/config.json', allowCopy: true }))),
                        h("ema-tab-header", { slot: "header", name: "tab6" }, "Flip board"),
                        h("ema-tab-content", { slot: "content", name: "tab6" },
                            h("ema-layout", { class: 'layout-grid-fill flip-board' }, this.data.manifest.components.map((item, i) => {
                                return h("ema-flip", { class: "item", "flip-events": "click", "flip-back-events": "click", "flip-duration": "350", "flip-timing-function": "ease-in-out" },
                                    h("div", { slot: "front" },
                                        h("ema-card", null,
                                            h("ema-card-header", null,
                                                h("span", { class: "ema-card-header-title" }, (i + 1)),
                                                h("span", { class: "ema-card-header-subtitle" }, '<ema-flip>')),
                                            h("ema-card-content", null, "info goes here"),
                                            h("ema-card-bottom", null,
                                                h("button", { class: 'btn btn-primary' }, "flip me")))),
                                    h("div", { slot: "back" },
                                        h("ema-card", null,
                                            h("ema-card-header", null,
                                                h("span", { class: "ema-card-header-title" }, "Flip card back"),
                                                h("span", { class: "ema-card-header-subtitle" }, "Subtitle")),
                                            h("ema-card-content", null, "Content goes here"),
                                            h("ema-card-bottom", null,
                                                h("button", { class: 'btn btn-primary' }, "Action!")))));
                            }))),
                        h("ema-tab-header", { slot: "header", name: "tab5" }, "Layouts"),
                        h("ema-tab-content", { slot: "content", name: "tab5" },
                            h("h5", null, ".layout-header-sidebar20-content80-footer"),
                            h("ema-layout", { class: 'layout-header-sidebar20-content80-footer', "grid-gap": '5px' },
                                h("header", null, "My header"),
                                h("aside", null, "Sidebar"),
                                h("article", null,
                                    h("h4", null, "2 column, header and footer"),
                                    h("p", null, "Example content.")),
                                h("footer", null, "My footer")),
                            h("h5", null, ".layout-grid-fill"),
                            h("ema-layout", { class: 'layout-grid-fill' }, this.data.mockData.map((item) => {
                                return h("article", { class: 'text-center' },
                                    h("h4", null, item.data.attributes.title),
                                    h("ema-lazy-img", { src: item.links.self }));
                            })),
                            this.data.mockData.map((item) => {
                                return h("ema-layout", { class: 'layout-header-content80-sidebar20-footer mb-3' },
                                    h("header", null,
                                        h("h4", null, item.data.type)),
                                    h("article", null,
                                        h("h3", null, item.data.attributes.title),
                                        h("p", null, item.data.attributes.body)),
                                    h("aside", null,
                                        h("ema-lazy-img", { src: item.links.self })),
                                    h("footer", null, item.data.attributes.email));
                            })),
                        h("ema-tab-header", { slot: "header", name: "tab2" }, "Swagger IO"),
                        h("ema-tab-content", { slot: "content", name: "tab2" },
                            h("ema-iframe", { src: 'https://editor.swagger.io/', height: '1280px', fullscreen: false, fullscreenMargins: '180px,0,180px,0' }))))),
            h("footer", null)));
    }
    static get is() { return "ema-app-dev"; }
    static get properties() { return {
        "authenticated": {
            "state": true
        },
        "clientId": {
            "type": String,
            "attr": "client-id"
        },
        "data": {
            "state": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-dev:**/"; }
}
//# sourceMappingURL=app-dev.js.map