import { interval } from 'rxjs';
import { AppService } from '../../global/app-service';
import { BaseApi, ConfigService, DomUtil } from '@ema/core';
import { HttpService } from '@ema/rx';
import { concatAll, map, pluck } from 'rxjs/operators';
import './web-comp';
import './web-comp-sub';
export class AppDev {
    constructor() {
        this.authenticated = false;
        this.clientId = 'e-be';
        this.app = AppService.instance;
        this.api = new BaseApi();
        this.http = HttpService.instance;
        this.config = ConfigService.instance;
        this.translation = this.app.translation;
        this.data = this.app.data;
    }
    async runTests() {
        let repeaterMockData = [];
        let data$ = this.http.get('assets/data/mock-data.json');
        data$.pipe(pluck('data'), concatAll(), map((item) => item['data']['attributes'])).subscribe((arg) => {
            repeaterMockData.push(arg);
        }, undefined, () => {
            console.log('complete');
            this.data = Object.assign({}, this.data, { repeaterMockData: repeaterMockData });
        });
        let webcomponent = this.el.querySelector('web-comp');
        let webcomponent2 = this.el.querySelector('web-comp-runtime');
        if (webcomponent) {
            webcomponent['test'] = 'test';
        }
        interval(3000).subscribe((arg) => {
            if (webcomponent) {
                webcomponent['label'] = Math.random();
            }
            if (webcomponent2) {
                webcomponent2['label'] = Math.random();
            }
        });
        let dialogComponent = document.getElementById('app-dialog');
        if (dialogComponent) {
            dialogComponent['setConfirmHandler'](function () {
                console.log('dialogConfirmHandler called');
            });
        }
    }
    debuggerTest() {
        let emaDebugger = document.querySelector('ema-debugger');
        if (emaDebugger) {
            emaDebugger.open();
            interval(1500).subscribe((i) => {
                if (i <= this.data.dwpData.length - 1) {
                    if (emaDebugger) {
                        emaDebugger.dataJson = JSON.stringify(this.data.dwpData[i]);
                    }
                }
            });
        }
    }
    componentDidLoad() {
        this.runTests();
    }
    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" }, "Div"),
                        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?', function () { console.log('confirmed'); }) }, "Confirm"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').confirm('Are you sure?') }, "Confirm2"),
                                h("button", { class: 'btn ', onClick: ev => document.querySelector('ema-dialog').notice('Notice content') }, "Notice"),
                                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("web-comp", { label: "runtime webcomponent", test: "test", "data-json": JSON.stringify({ foo: 'bar', sliderV: 0 }) }),
                            h("web-comp-runtime", { label: "runtime webcomponent", "data-json": JSON.stringify({ foo: 'bar', sliderV: 0 }) }),
                            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" }, "Layout"),
                        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.data.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.data.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: "repeater" }, "Repeater"),
                        h("ema-tab-content", { slot: "content", name: "repeater" },
                            h("h4", null, "repeater-component"),
                            h("ema-repeater", { element: "ul", template: '<li><h5>${title}</h5><p>${body}</p></li>', "data-json": JSON.stringify(this.data.repeaterMockData) }))))),
            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
        },
        "el": {
            "elementRef": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-dev:**/"; }
}
