"use strict";

(function ($) {
    const isMobile = () => window.matchMedia("(max-width: 1023px)").matches;

    const revealSpoiler = ($inner) => {
        $inner.addClass("is-revealed");
    };

    const hideSpoiler = ($inner) => {
        $inner.removeClass("is-revealed");
    };

    const bindSpoiler = ($item) => {
        const $inner = $item.find(".king-addons-styled-text-inner");
        if (!$inner.length) return;

        const triggerDesktop = $item.data("spoiler-desktop") || "hover";
        const triggerMobile = $item.data("spoiler-mobile") || "tap";

        const attachHover = () => {
            $item.on("mouseenter", () => revealSpoiler($inner));
            $item.on("mouseleave", () => hideSpoiler($inner));
        };

        const attachClick = () => {
            $item.on("click", (e) => {
                e.preventDefault();
                const isOpen = $inner.hasClass("is-revealed");
                if (isOpen) {
                    hideSpoiler($inner);
                } else {
                    revealSpoiler($inner);
                }
            });
        };

        if (isMobile()) {
            if (triggerMobile === "hover") {
                attachHover();
            } else {
                attachClick();
            }
        } else {
            if (triggerDesktop === "click") {
                attachClick();
            } else {
                attachHover();
            }
        }
    };

    const startTyping = ($item) => {
        const $inner = $item.find(".king-addons-styled-text-inner span").first();
        if (!$inner.length) return;

        const fullText = $inner.text();
        const speed = parseInt($item.data("typing-speed"), 10) || 80;
        const delay = parseInt($item.data("typing-delay"), 10) || 1200;
        const loop = $item.data("typing-loop") === "yes";
        const cursorChar = ($item.data("typing-cursor") || "|").toString();

        const $cursor = $('<span class="king-addons-styled-text__cursor"></span>').text(cursorChar);
        $inner.after($cursor);

        let pos = 0;
        let isTyping = false;

        const typeOnce = () => {
            if (isTyping) return;
            isTyping = true;
            $inner.text("");
            pos = 0;

            const step = () => {
                if (pos <= fullText.length) {
                    $inner.text(fullText.substring(0, pos));
                    pos += 1;
                    setTimeout(step, speed);
                } else {
                    isTyping = false;
                    if (loop) {
                        setTimeout(typeOnce, delay);
                    }
                }
            };

            step();
        };

        typeOnce();
    };

    const initStyledText = ($scope) => {
        const $items = $scope.find('.king-addons-styled-text[data-effect="spoiler"]');
        if ($items.length) {
            $items.each(function () {
                bindSpoiler($(this));
            });
        }

        const $typingItems = $scope.find('.king-addons-styled-text[data-effect="typing"]');
        if ($typingItems.length) {
            $typingItems.each(function () {
                startTyping($(this));
            });
        }
    };

    $(window).on("elementor/frontend/init", function () {
        elementorFrontend.hooks.addAction(
            "frontend/element_ready/king-addons-styled-text-builder.default",
            function ($scope) {
                initStyledText($scope);
            }
        );
    });
})(jQuery);