let KKInnovation = {
    openPopup: async function ({ url }) {
        if (this.isPopupOpen) return;

        this.isPopupOpen = true;

        try {
            await this.loadStyles('%PUBLIC_URL%/embedPopup/style.css');

            let popup = document.createElement('div');
            popup.id = 'KKInnovation-embed-popup';

            popup.innerHTML = `
                <div id="KKInnovation-embed-popup-content">
                    <div id="KKInnovation-embed-popup-loading"></div>
                    <iframe src="${url}" frameborder="0"></iframe>
                </div>
                <div id="KKInnovation-embed-popup-close">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M12 10.586l-3.293-3.293-1.414 1.414 3.293 3.293-3.293 3.293 1.414 1.414 3.293-3.293 3.293 3.293 1.414-1.414-3.293-3.293 3.293-3.293-1.414-1.414z"/>
                    </svg>
                </div>
            `;
            document.body.appendChild(popup);
            setTimeout(() => {
                popup.classList.add('KKInnovation-embed-popup-open');

                // disable scrolling
                document.body.style.overflow = 'hidden';
            }, 0);

            // Add click event listener to the background div
            document.getElementById('KKInnovation-embed-popup').addEventListener('click', (event) => {
                // Check if the clicked element is the background div
                if (event.target.id === 'KKInnovation-embed-popup') {

                    // enable scrolling
                    document.body.style.overflow = 'auto';

                    popup.classList.remove('KKInnovation-embed-popup-open');

                    setTimeout(() => {
                        this.isPopupOpen = false;
                        popup.remove();


                    }, 400);
                }
            });
        } catch (error) {
            this.isPopupOpen = false;
            return;
        }
    },
    loadStyles: async function (url) {
        return new Promise((resolve, reject) => {
            if (this.stylesLoaded) {
                resolve();
                return;
            }

            // load stylesheet
            let link = document.createElement('link');
            link.type = 'text/css';

            link.rel = 'stylesheet';
            link.href = url;

            document.getElementsByTagName('head')[0].appendChild(link);

            // wait for stylesheet to load
            link.onload = function () {
                stylesLoaded = true;
                resolve();
            };

            link.onerror = function () {
                reject();
            };
        })
    },


    isPopupOpen: false,
    stylesLoaded: false,
}