String.prototype.format = function () {
    var formatted = this;
    for (var i = 0; i < arguments.length; i++) {
        var regexp = new RegExp('\\{' + i + '\\}', 'gi');
        formatted = formatted.replace(regexp, arguments[i]);
    }
    return formatted;
}

// Kendo UI Editor 툴바 정의
const KendoEditorTools = ["bold", "italic", "underline", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "createLink", "unlink", "foreColor", "backColor", "fontSize"];

function ShowToShadowDom(host, template, removeScript, imgLazyLoading) {
    const hostElement = document.querySelector("#" + host);
    const templateElement = document.getElementById(template);
    const clone = templateElement.content.cloneNode(true);

    // 스크립트 태그 제거
    if (removeScript) {
        clone.querySelectorAll("script").forEach(script => {
            script.remove();
        });

        clone.querySelectorAll('*').forEach(el => {
            el.onclick = null;
            el.onmouseover = null;
            el.onkeydown = null;
        });
    }
    // 이미지가 뷰포트에 들어와야 로딩
    if (imgLazyLoading) {
        const imgs = clone.querySelectorAll("img");
        imgs.forEach(img => { img.loading = 'lazy'; });
    }

    if (hostElement.shadowRoot) {
        hostElement.shadowRoot.innerHTML = "";
    } else {
        hostElement.attachShadow({ mode: "open" });
    }
    hostElement.shadowRoot.appendChild(clone);
}

function ShowToShadowDom4DarkMode(host, template, removeScript, imgLazyLoading) {
    const hostElement = document.querySelector("#" + host);
    const templateElement = document.getElementById(template);
    var clone = templateElement.content.cloneNode(true);

    // 스크립트 태그 제거
    if (removeScript) {
        clone.querySelectorAll("script").forEach(script => {
            script.remove();
        });

        clone.querySelectorAll('*').forEach(el => {
            el.onclick = null;
            el.onmouseover = null;
            el.onkeydown = null;
        });
    }
    // 이미지가 뷰포트에 들어와야 로딩
    if (imgLazyLoading) {
        const imgs = clone.querySelectorAll("img");
        imgs.forEach(img => { img.loading = 'lazy'; });
    }

    const darkModeStyle = document.createElement('style');
    darkModeStyle.textContent = `
        /* Shadow DOM 내부의 모든 요소를 통째로 색상 반전 (흰 바탕 -> 검은 바탕) */
        :host {
        display: block;
        filter: invert(1) hue-rotate(180deg) !important;
        /* 폰트 외곽선을 강제로 부드럽게 깎아주는 핵심 속성 */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        /* 글꼴 렌더링 시 가독성과 부드러움을 최우선으로 설정 */
        text-rendering: optimizeLegibility !important;
        /* 필터로 깨진 외곽선에 미세한 투명 그림자를 주어 부드럽게 만듦 */
        /* 반전 상태이므로 #000은 흰색 그림자가 되어 글자를 도톰하고 부드럽게 감싸줍니다. */
        text-shadow: 0 0 0.6px rgba(0, 0, 0, 0.25) !important;
        }
        /* 색상이 뒤집히면 안 되는 미디어 요소들을 다시 반전시켜 본래 색상 유지 */
        img, video, [style*="background-image"], .no-invert { 
        filter: invert(1) hue-rotate(180deg) !important;
        }
        /* 반전으로 인해 텍스트나 이미지가 너무 눈부실 경우를 대비한 미세 조정 */
        img {
        opacity: 0.9;
        transition: opacity 0.3s;
        }
        img:hover {
        opacity: 1;
        }
		body, img {
			color: #2f2f2f; background-color:#e1e1e1;
		}
        /*a { color: #4dabf7; }*/
    `;

    if (hostElement.shadowRoot) {
        hostElement.shadowRoot.innerHTML = "";
    } else {
        hostElement.attachShadow({ mode: "open" });
    }

    var wrapper = document.createElement("body");
    wrapper.appendChild(clone);
    hostElement.shadowRoot.appendChild(darkModeStyle);
    hostElement.shadowRoot.appendChild(wrapper);
}