import { h } from '../ema.core.js';

import './chunk-de721f0a.js';
import './chunk-237a2f57.js';
import { e as DomUtil, k as StringUtil } from './chunk-f41c48db.js';
import { a as AppService } from './chunk-628d443f.js';

class Home {
    constructor() {
        this.app = AppService.instance;
    }
    componentWillLoad() {
        this.data = { title: '@ema/components' };
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    iframeLoaded(e) {
        console.log(e.detail);
    }
    postRender() {
        DomUtil.fadeIn(this.el.querySelector('.jumbotron'), 350, 1400);
    }
    render() {
        return (h("div", { class: 'text-center' },
            h("ema-svg", { src: '../assets/sketch-index/home-content/images/home-content.svg', "data-json": JSON.stringify(this.data), class: 'img-responsive' }),
            h("div", { class: 'jumbotron pt-3 pb-3 hidden' },
                h("h5", null, 'webcomponents'),
                h("ul", { class: 'list-inline' }, this.app.components.map((item) => {
                    return h("li", { class: "list-inline-item" },
                        h("ema-route-link", { url: '/components/' + item.tag }, '<' + item.tag + '>'));
                })))));
    }
    static get is() { return "ema-app-home"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "el": {
            "elementRef": true
        }
    }; }
    static get listeners() { return [{
            "name": "iframeLoaded",
            "method": "iframeLoaded"
        }]; }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}ema-app-home .jumbotron{color:#868e96;border-top:1px solid #c5c9cd;border-bottom:1px solid #c5c9cd;padding-left:3rem;padding-right:3rem}ema-app-home .jumbotron li{font-size:.86rem;padding:.25rem .33333rem}"; }
}

class Svg {
    constructor() {
        this.type = 'template';
    }
    componentDidLoad() { }
    componentDidUpdate() { }
    async loadSvg() {
        this.loading = true;
        const result = await fetch(`${this.src}`).then((response) => {
            return response.text();
        })
            .catch(error => console.error('Error:', error));
        this.loading = false;
        return result;
    }
    parseSvg(svgResult) {
        let su = StringUtil;
        this._svg = svgResult;
        svgResult = svgResult.replace(']>', '');
        svgResult = su.replaceAll(svgResult, '{{ ', '{{');
        svgResult = su.replaceAll(svgResult, '{{  ', '{{');
        svgResult = su.replaceAll(svgResult, ' }}', '}}');
        svgResult = su.replaceAll(svgResult, '  }}', '}}');
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                svgResult = su.replaceAll(svgResult, '{{' + k + '}}', this.data[k]);
            });
        }
        this.svgResult = svgResult;
        setTimeout((arg) => {
            this.el.querySelector('.embedded').innerHTML = svgResult;
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    async getElements() {
        this.elements = [];
        let ignoredArr = ['Shape', 'Oval', 'Rectangle', 'Line', 'Group'];
        let elements = this.el.querySelectorAll('*');
        Array.prototype.forEach.call(elements, (el) => {
            if (DomUtil.getAttributes(el)['id']) {
                let id = DomUtil.getAttributes(el)['id'];
                let ignored = false;
                ignoredArr.forEach((ignore) => {
                    if (id.match(ignore)) {
                        ignored = true;
                    }
                });
                if (!ignored) {
                    if (id.match('btn-')) {
                        el.style.cursor = 'pointer';
                        el.style.opacity = '0';
                    }
                    this.elements.push({
                        id: id,
                        el: el
                    });
                }
            }
        });
        this.setClickHandlers();
        return this.elements;
    }
    svgElementClickHandler(e) {
        let detail;
        e.stopPropagation();
        this.elements.forEach((element) => {
            if (element.el === e.target) {
                detail = element;
            }
        });
        if (detail) {
            this.svgElementClick.emit(detail);
        }
    }
    setClickHandlers() {
        this.elements.forEach((element) => {
            document.getElementById(element.id).addEventListener('click', (e) => {
                this.svgElementClickHandler(e);
            });
            if (element.id.match('btn-')) ;
        });
    }
    renderSvg() {
        const $svg = this._svgElement;
        const responsive = !(this.el.className.indexOf('img-responsive') === -1);
        let viewBox;
        if ($svg.getAttribute('viewBox')) {
            viewBox = $svg.getAttribute('viewBox');
        }
        let w, h;
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            if (responsive === false) {
                this.el.style.width = w + 'px';
                this.el.style.maxWidth = w + 'px';
                this.el.style.height = h + 'px';
                this.el.style.maxHeight = h + 'px';
                $svg.style.width = w + 'px';
                $svg.style.maxWidth = w + 'px';
                $svg.style.height = h + 'px';
                $svg.style.maxHeight = h + 'px';
                let att;
                att = document.createAttribute('width');
                att.value = w;
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                $svg.setAttributeNode(att);
            }
        }
    }
    render() {
        if (this.dataJson) {
            this.data = JSON.parse(this.dataJson);
        }
        if (this.src) {
            this.loadSvg().then((res) => {
                this.parseSvg(res);
            });
        }
        return (h("div", null,
            h("div", { class: "svg-container embedded" })));
    }
    static get is() { return "ema-svg"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": "Any",
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getElements": {
            "method": true
        },
        "src": {
            "type": String,
            "attr": "src"
        },
        "svgResult": {
            "state": true
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get events() { return [{
            "name": "svgElementClick",
            "method": "svgElementClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}

export { Home as EmaAppHome, Svg as EmaSvg };
