<template>
    <div :id="this.id" class="site-preview">
        <div class="thumbnail-container interactive">
            <div v-if="iframeHtml" :class="['thumbnail', this.type, this.name]">
                <iframe
                    :srcdoc="iframeHtml"
                    onload="this.style.opacity = 1"
                ></iframe>
            </div>
            <div v-else :class="['thumbnail', this.type, this.name]">
                <iframe
                    :src="this.url" frameborder="0"
                    onload="this.style.opacity = 1"
                ></iframe>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id : null,
            iframeHtml : false,
        }
    },
    props : {
        html : {
            default : false,
        },
        url : {
            type : String,
        },
        frontendCss : {
            type : String
        },
        boxCss : {
            type : String
        },
        name : {
            type : String,
            default : 'preview'
        },
        type : {
            type : String,
            default : 'component'
        }
    },
    mounted() {
        this.id = this._uid;

        if (this.html) {
            // Convert the columns to bootstrap
            let html = this.html;
            html = this.handleColumnSize(html);

            // Set the iframe content
            this.setIframeContent(html);
        }

        // Handle the preview size
        this.handlePreviewSize();
        window.addEventListener('resize', this.handlePreviewSize);
    },
    unmounted() {
        window.removeEventListener('resize', this.handlePreviewSize);
    },
    methods : {
        handleColumnSize(html) {
            let rowClass = 'row';
            let colClass = [
                'col-md-1',
                'col-md-2',
                'col-md-3',
                'col-md-4',
                'col-md-5',
                'col-md-6',
                'col-md-7',
                'col-md-8',
                'col-md-9',
                'col-md-10',
                'col-md-11',
                'col-md-12'
            ];

            // Change html to bootstrap
            html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
            html = html.replace(new RegExp('column full', 'g'), colClass[11]);
            html = html.replace(new RegExp('column half', 'g'), colClass[5]);
            html = html.replace(new RegExp('column third', 'g'), colClass[3]);
            html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
            html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
            html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
            html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
            html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
            html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
            html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);

            return html;
        },
        handlePreviewSize() {
            this.$nextTick(function () {
                let component = document.getElementById(this.id);
                let container = component.querySelector('.thumbnail-container');
                let thumbnail = component.querySelector('.thumbnail');
                let iframe = thumbnail.querySelector('iframe');

                // Calculate the required scale by comparing the container and iframe width
                let scale = container.offsetWidth / iframe.offsetWidth;
                thumbnail.style.transform = `scale(${scale})`;
            });
        },
        setIframeContent(html) {
            let frontendCss = this.frontendCss;
            let boxCss = this.boxCss;

            this.iframeHtml = `<html><head>`;
            this.iframeHtml += `<link href="${frontendCss}" rel="stylesheet" type="text/css">`;
            this.iframeHtml += `<link href="${boxCss}" rel="stylesheet" type="text/css">`;
            this.iframeHtml += `
                <style>
                    html, body, .is-section {
                        height: 100%;
                    }
                    .iframe-preview {
                        min-height: 100%;
                        display: flex;
                        align-content: center;
                        justify-content: center;
                        align-items: center;
                    }
                </style>
            `;
            this.iframeHtml += `</head><body>`;
            this.iframeHtml += `<div class="iframe-preview">`;
            this.iframeHtml += `<div class="container-fluid">${html}</div>`;
            this.iframeHtml += `</div>`;
            this.iframeHtml += `</body></html>`;
        }
    }
}
</script>
