import { Util } from '../../lib/index';
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]);
        });
    }
    componentDidLoad() {
        this.initEditor();
    }
    componentDidUpdate() {
        this.initEditor();
    }
    initEditor() {
        this.initTextArea();
        this.updateExample();
        this.updateTextArea(this.textArea);
    }
    initTextArea() {
        this.textArea = this.el.getElementsByTagName('textarea')[0];
        // this.markupState = this.textArea['value'];
        this.textArea.addEventListener('keydown', () => {
            this.updateTextArea(this.textArea);
        });
        this.textArea.addEventListener('change', () => {
            this.updateTextArea(this.textArea);
        });
        let markup = this.markup.get(this.tag).trim();
        this.textArea['value'] = markup;
        // this.el.getElementsByClassName('example')[0].innerHTML = markup;
    }
    updateExample() {
        this.markup.set(this.tag, this.textArea['value']);
        let markup = this.markup.get(this.tag).trim();
        this.textArea['value'] = markup;
        this.el.getElementsByClassName('example')[0].innerHTML = markup;
    }
    updateTextArea(textarea) {
        this.updateExample();
        setTimeout(() => {
            textarea.style.cssText = 'height:auto; padding:0';
            textarea.style.cssText = 'height:' + (textarea.scrollHeight + 7) + 'px';
        }, 20);
    }
    copyExample(ev) {
        Util.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
        },
        "markupState": {
            "state": true
        },
        "tag": {
            "type": String,
            "attr": "tag"
        }
    }; }
    static get style() { return "/**style-placeholder:ema-demo:**/"; }
}
//# sourceMappingURL=demo.js.map