import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { getConnectedCog } from "../utils/CogManager";
import TiltGauge from "../TiltGauge";
export function GaugePhase({ nextPhase, BlocksConnectedIcon, initialBlock, blocksGif }) {
    const [cogTiltValue, setCogTiltValue] = useState(0);
    const [tickIconState, setTickIconState] = useState("hidden");
    const [blocksIconState, setBlocksIconState] = useState("visible");
    useEffect(() => {
        const intervalId = setInterval(() => {
            const connectedCog = getConnectedCog();
            if (connectedCog) {
                const data = connectedCog.raftStateInfo.accelerometer;
                const tiltValue = data.ax;
                if (blocksIconState === "visible") {
                    setCogTiltValue(tiltValue);
                }
            }
        }, 200);
        return () => clearInterval(intervalId);
    }, []);
    const onBlocksAnimationEnd = useCallback(() => {
        setBlocksIconState("hidden");
        setTickIconState("animation");
    }, []);
    const onTickIconAnimationEnd = useCallback(() => {
        nextPhase();
    }, []);
    const blocksIconContainerClasses = [
        styles.doubleColumnContainer,
        blocksIconState === "animation" ? styles.fadeOutAnimation : "",
        blocksIconState === "hidden" ? styles.hide : ""
    ].join(" ");
    const tickIconClassNames = [
        styles.tickIconFullScreen,
        tickIconState === "animation" ? styles.fadeInAnimation : "",
        tickIconState === "hidden" ? styles.hide : "",
        tickIconState === "visible" ? styles.show : "",
    ].join(" ");
    let cogTiltValue_ = Math.abs(cogTiltValue);
    if (initialBlock.block === "tiltleft") {
        if (cogTiltValue > 0) {
            cogTiltValue_ = 0;
        }
    }
    else if (initialBlock.block === "tiltright") {
        if (cogTiltValue < 0) {
            cogTiltValue_ = 0;
        }
    }
    if (cogTiltValue_ > 1) {
        cogTiltValue_ = 1;
    }
    else if (cogTiltValue_ < 0) {
        cogTiltValue_ = 0;
    }
    if (cogTiltValue_ > 0.95) {
        if (blocksIconState === "visible") {
            setBlocksIconState("animation");
        }
    }
    return (_jsxs("div", { className: styles.singleColumnContainer, children: [_jsxs("div", { className: blocksIconContainerClasses, onAnimationEnd: onBlocksAnimationEnd, children: [_jsx("div", { className: styles.blocksGifContainer, children: _jsx("img", { src: blocksGif, alt: "Blocks Gif", className: styles.blocksGif }) }), _jsx("div", { className: styles.gaugeContainer, style: {}, children: _jsx(TiltGauge, { score: cogTiltValue_, title: "" }) })] }), _jsx(TickIcon, { className: tickIconClassNames, onAnimationEnd: onTickIconAnimationEnd })] }));
}
