document.addEventListener("DOMContentLoaded", function () {
    if (!document.querySelector("main.won-page")) {
        return;
    }

    const wheelWrapper = document.getElementById("wheel-wrapper"),
        spinWheelInner = wheelWrapper?.querySelector(".wheel-inner") as HTMLElement | null | undefined,
        spinWheelBtnList = wheelWrapper?.querySelectorAll(".wheel-spin") as NodeListOf<HTMLElement> | undefined,
        animationSection = document.getElementById("spin-animation"),
        prizeSection = document.getElementById("prize-section"),
        discountSection = document.getElementById("discount-section"),
        winningProofSection = document.getElementById("winning-proof-section");

    /** Hide animation and show win sections */
    const toggleAnimationPhase = () => {
        if (animationSection) {
            animationSection.classList.add("d-none");
        }
        if (prizeSection) {
            prizeSection.classList.remove("d-none");
        }else if (discountSection) {
            discountSection.classList.remove("d-none");
        } else {
            throw new Error("No section to toggle");
        }
        if (winningProofSection) {
            winningProofSection.classList.remove("d-none");
        }
    };

    if (!animationSection) {
        throw Error("section#spin-animation missing");
    }

    if (wheelWrapper && spinWheelInner && spinWheelBtnList && spinWheelBtnList.length) {
        let clicks: number = 0;
        // * Set default degree (360*5) soit 5 tours
        const degree: number = (360 * 5),
            wheelPartsDeg: number = 360 / spinWheelInner.children.length,
            thisWinAngle: number = (Number.parseInt(
                String(wheelWrapper.dataset["winChild"])
                // On s'aligne sur la tranche on on ajoute entre 10% et 90% d'une part
            )) * wheelPartsDeg - 45 + (wheelPartsDeg * (Math.random() * (0.9 - 0.1) + 0.1));
        let timeout: NodeJS.Timeout | null = null;

        const spinTheWheel = () => {
        // * Add 1 every click

            /**
             * Multiply the degree by number of clicks
             * generate random number between 1 - 85,
             * then add to the new degree
             */
            const newDegree = degree * ++clicks;
            const totalDegree = newDegree + thisWinAngle;

            /**
             * Let's make the spin btn to tilt every
             * time the edge of the section hits
             * the indicator
             */
            spinWheelInner.style["transform"] = `rotate(${totalDegree}deg)`;
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(toggleAnimationPhase, 7000);
        };
        /** ! Même Algo que sur GGW legacy */
        spinWheelBtnList.forEach((spinBtn) => {
            spinBtn.addEventListener("click", spinTheWheel);
            spinBtn.addEventListener("keydown", (kbdEvt: KeyboardEvent) => {
                if (
                    kbdEvt.key == " " ||
                    kbdEvt.code == "Space" ||
                    kbdEvt.keyCode == 32 ||
                    kbdEvt.key == "Enter" ||
                    kbdEvt.code == "Enter" ||
                    kbdEvt.keyCode == 13
                ) {
                    spinBtn.classList.add("active");
                    spinTheWheel();
                    kbdEvt.preventDefault();
                }
            });
            spinBtn.addEventListener("keyup", (kbdEvt: KeyboardEvent) => {
                if (
                    kbdEvt.key == " " ||
                    kbdEvt.code == "Space" ||
                    kbdEvt.keyCode == 32 ||
                    kbdEvt.key == "Enter" ||
                    kbdEvt.code == "Enter" ||
                    kbdEvt.keyCode == 13
                ) {
                    spinBtn.classList.remove("active");
                    kbdEvt.preventDefault();
                }
            });
        });
    } else {
        toggleAnimationPhase();
    }
});