"use strict";
(function () {
    const mobileDevice = window.matchMedia('(max-width: 991px)');
    const inputsWithCustomPlaceholderWrappers = document.querySelectorAll('[data-element="input-with-custom-placeholder-wrapper"]');
    const timelines = [];
    let animationRunning = false;
    // placeholder functionality
    inputsWithCustomPlaceholderWrappers.forEach((inputWrapper) => {
        const input = inputWrapper.querySelector('input');
        const inputPlaceholder = inputWrapper.querySelector('[data-placeholder-texts]');
        input === null || input === void 0 ? void 0 : input.addEventListener('focusin', () => {
            if (inputPlaceholder) {
                inputPlaceholder.style.color = '#9B9EA3';
            }
        });
        input === null || input === void 0 ? void 0 : input.addEventListener('focusout', () => {
            if (inputPlaceholder) {
                inputPlaceholder.style.color = 'rgba(155, 158, 163, 0.5)';
            }
        });
        input === null || input === void 0 ? void 0 : input.addEventListener('input', () => {
            if (!input.value) {
                if (inputPlaceholder) {
                    inputPlaceholder.style.display = 'flex';
                }
            }
            else {
                if (inputPlaceholder) {
                    inputPlaceholder.style.display = 'none';
                }
            }
        });
        // save init text
        inputPlaceholder === null || inputPlaceholder === void 0 ? void 0 : inputPlaceholder.setAttribute('data-initial-text', inputPlaceholder.innerText);
    });
    function splitTextIntoSpans(element) {
        const text = element.innerText;
        const words = text.split(' ');
        const spans = words.map((word) => {
            if (word.trim() !== '') {
                return `<span class="input-placeholder-word" style="display: inline-block;">${word}</span>`;
            }
            return '';
        });
        element.innerHTML = spans.filter(Boolean).join(' ');
    }
    function animateText(textIndex, inputWrapper) {
        var _a;
        if (!animationRunning) {
            return;
        }
        const inputPlaceholder = inputWrapper.querySelector('[data-placeholder-texts]');
        const inputPlaceholderTexts = inputPlaceholder
            ? (_a = inputPlaceholder.getAttribute('data-placeholder-texts')) === null || _a === void 0 ? void 0 : _a.split(';')
            : [];
        if (inputPlaceholder && inputPlaceholderTexts && animationRunning) {
            inputPlaceholder.innerHTML = inputPlaceholderTexts[textIndex];
            splitTextIntoSpans(inputPlaceholder);
            const placeholderWords = inputPlaceholder.querySelectorAll('.input-placeholder-word');
            const tl = gsap.timeline({
                onComplete: function () {
                    if (!animationRunning) {
                        return;
                    }
                    animateText((textIndex + 1) % inputPlaceholderTexts.length, inputWrapper);
                },
            });
            timelines.push(tl);
            tl.fromTo(placeholderWords, {
                opacity: 0,
                yPercent: 50,
            }, {
                duration: 0.04,
                stagger: 0.04,
                opacity: 1,
                yPercent: 0,
                ease: 'power1.out',
            }).to(placeholderWords, {
                delay: 1,
                duration: 0.03,
                stagger: 0.04,
                opacity: 0,
                yPercent: -50,
                ease: 'power1.out',
            });
        }
    }
    function startAnimations() {
        animationRunning = true;
        inputsWithCustomPlaceholderWrappers.forEach((inputWrapper) => {
            animateText(0, inputWrapper);
        });
    }
    function endAnimations() {
        animationRunning = false;
        // kill all timelines
        timelines.forEach((tl) => {
            tl === null || tl === void 0 ? void 0 : tl.kill();
        });
        timelines.length = 0;
        // set initial placeholders text
        inputsWithCustomPlaceholderWrappers.forEach((inputWrapper) => {
            const inputPlaceholder = inputWrapper.querySelector('[data-placeholder-texts]');
            const initialText = inputPlaceholder === null || inputPlaceholder === void 0 ? void 0 : inputPlaceholder.getAttribute('data-initial-text');
            if (inputPlaceholder && initialText) {
                inputPlaceholder.innerText = initialText;
            }
        });
    }
    function handleDeviceChange(e) {
        if (e.matches) {
            startAnimations();
        }
        else {
            endAnimations();
        }
    }
    mobileDevice.addEventListener('change', handleDeviceChange);
    handleDeviceChange({ matches: mobileDevice.matches });
})();