import { useCallback, useEffect, useRef, useState } from "react";
import { ReactComponent as TickIcon } from "../assets/green-tick.svg";
import styles from "./styles.module.css";
import { getConnectedCog } from "../utils/CogManager";
import Cog from "@robotical/webapp-types/dist-types/src/application/RAFTs/Cog/Cog";
import { PosterItem } from "../types";
import TiltGauge from "../TiltGauge";

type Props = {
    nextPhase: () => void;
    BlocksConnectedIcon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
    initialBlock: PosterItem;
    blocksGif: string;
};

export function GaugePhase({ nextPhase, BlocksConnectedIcon, initialBlock, blocksGif }: Props) {
    const [cogTiltValue, setCogTiltValue] = useState(0);

    const [tickIconState, setTickIconState] = useState<"hidden" | "visible" | "animation">("hidden");
    const [blocksIconState, setBlocksIconState] = useState<"hidden" | "visible" | "animation">("visible");

    useEffect(() => {
        const intervalId = setInterval(() => {
            const connectedCog = getConnectedCog();
            if (connectedCog) {
                const data = (connectedCog as Cog).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 (
        <div className={styles.singleColumnContainer}>
            <div className={blocksIconContainerClasses} onAnimationEnd={onBlocksAnimationEnd}>
                {/* <BlocksConnectedIcon className={styles.blocksConnectedIcon} /> */}
                <div className={styles.blocksGifContainer}>
                    <img src={blocksGif} alt="Blocks Gif" className={styles.blocksGif} />
                </div>
                <div className={styles.gaugeContainer} style={{}}>
                    <TiltGauge score={cogTiltValue_} title="" />
                </div>
            </div>
            <TickIcon className={tickIconClassNames} onAnimationEnd={onTickIconAnimationEnd} />
        </div>
    );
}
