///////////////////////////////

// write effect by Ninny design
// Copyright (c) 2023 Ninny design
// 무단사용금지

///////////////////////////////

function write_effect_ninny(x) {

    // 실행 클래스
    const element = document.querySelectorAll(".write-effect");

    element.forEach( function(el) {
        write_effect(el);
    });


    // 액션
    function write_effect(x) {
        const txt = x.querySelectorAll(".write-txt");
        const span = document.createElement('span');
        let speed = getComputedStyle(x).transitionDuration;

        if(speed == '0s') {
            speed = '0.1';
        } else {
            speed = speed.replace("s", "");
        }

        speed = speed * 1000;


        txt.forEach( function(el) {
            const scrWrite = el.closest('.scr-write');
            const sibling = el.previousElementSibling;

            let innertext = el.textContent;
            let delay = 300;
            let typingstart = false;

            el.setAttribute("data-write", innertext);
            el.setAttribute("data-length", innertext.length);

            let text = el.dataset.write;
            let length = el.dataset.length;

            if(sibling && sibling.classList.contains('write-txt') == true){
                let prevtext = el.previousElementSibling.dataset.length;
                delay += (prevtext * speed) + speed;

                el.setAttribute("data-length", Number(prevtext) + Number(length));
            }


            function typing_wrap() {
                for (n=0; n<length; n++) {
                    let write = text[n];

                    span.style.transitionDelay = delay+speed*n+"ms";

                    if(write != ' ') {
                        span.innerHTML = write;
                        el.innerHTML += span.outerHTML;
                    } else {
                        el.innerHTML += write;
                    }
                }
            }

            function typing_nowrap() {
                let i = 0;
                let typingInterval, typingTimeout;

                // if(el.classList.contains('end')) el.classList.remove('end');
                // el.innerHTML = "";

                typingInterval = setInterval(function() {
                    if(i != length) {
                        let write = text[i];
                        typingTimeout = setTimeout(function(){
                            el.innerHTML += write;
                        }, delay);
                        i++;
                    } else {
                        setTimeout(function(){
                            el.classList.add('end');
                        }, delay);
                        clearInterval(typingInterval);
                    }
                    // if(!scrWrite.classList.contains('active')) {
                    //     el.classList.add('end');
                    //     clearTimeout(typingTimeout);
                    //     clearInterval(typingInterval);
                    // }
                }, speed);
            }

            function typing() {
                el.innerHTML = "";

                if(el.closest('.txt-effect')) {
                    typing_wrap();
                } else {
                    if(scrWrite && scrWrite.classList.contains('active')) {
                        if(typingstart == false) {
                            typingstart = true;
                            typing_nowrap();
                        }
                    }

                    window.addEventListener('scroll', function() {
                        if(scrWrite && scrWrite.classList.contains('active')) {
                            if(typingstart == false) {
                                typingstart = true;
                                setTimeout(function(){
                                    typing_nowrap();
                                }, 300);
                            }
                        } else {
                            // typingstart = false;
                        }
                    });
                }
            }

            typing();

        });
    }
}


window.addEventListener('load', function() {
    write_effect_ninny();
});