import { DomUtil } from '@ema/core';
import { demosMarkup } from '../../global/demos-markup';
export class Demo {
    constructor() {
        this.markup = new Map();
        this.tag = '';
        Object.keys(demosMarkup).forEach((k, i) => {
            this.markup.set(k, demosMarkup[k].trim());
        });
    }
    componentDidLoad() {
        this.initTextArea();
    }
    componentDidUpdate() {
        if (this.tag && this.tag !== this.currentTag) {
            this.currentTag = this.tag;
            this.initTextArea();
        }
    }
    initTextArea() {
        console.log('initTextArea');
        this.textArea = this.el.getElementsByTagName('textarea')[0];
        if (this.markup.get(this.tag)) {
            this.currentMarkup = this.markup.get(this.tag);
        }
        if (this.textArea) {
            this.textArea.addEventListener('keydown', () => {
                this.updateExample();
            });
            this.textArea.addEventListener('change', () => {
                this.updateExample();
            });
            this.textArea['value'] = this.currentMarkup;
            this.el.getElementsByClassName('example')[0].innerHTML = this.currentMarkup;
            this.updateExample();
        }
    }
    updateExample() {
        if (this.textArea) {
            this.markup.set(this.tag, this.textArea['value'].trim());
            this.currentMarkup = this.textArea['value'];
            this.el.getElementsByClassName('example')[0].innerHTML = this.currentMarkup;
            this.updateTextArea();
        }
    }
    updateTextArea() {
        if (this.textArea) {
            setTimeout(() => {
                this.textArea.style.cssText = 'height:auto; padding:0';
                this.textArea.style.cssText = 'height:' + (this.textArea.scrollHeight + 7) + 'px';
            }, 30);
        }
    }
    copyExample(ev) {
        DomUtil.copyToClipboard(this.markup.get(this.tag));
    }
    render() {
        return (h("div", null, this.markup.get(this.tag) &&
            h("div", null,
                h("h6", { class: 'mt-1' },
                    "component render: ",
                    '<' + this.tag + '>'),
                h("div", { class: 'example' }),
                h("hr", null),
                h("h6", null,
                    "component markup: ",
                    '<' + this.tag + '>'),
                h("textarea", null),
                h("button", { class: 'btn btn-link pl-0', onClick: (ev) => this.copyExample(ev) },
                    h("ion-icon", { name: "copy", size: "large" })),
                h("button", { class: 'btn btn-link', onClick: (ev) => this.updateExample() },
                    h("ion-icon", { name: "refresh-circle", size: "large" })))));
    }
    static get is() { return "ema-demo"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "tag": {
            "type": String,
            "attr": "tag"
        }
    }; }
    static get style() { return "/**style-placeholder:ema-demo:**/"; }
}
