import { FC, useEffect, useRef, useState } from "react";
import "./SubstepButton.scss";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
import { useTool } from "@/hooks/useTool";
import { useHoveredStep } from "@/hooks/useHoveredStep";
import { useProgression } from "@/hooks/useProgression";

interface Substep {
    substep_name: string;
    substep_popover_title?: string;
    substep_popover_text?: string;
}

interface SubstepData {
    fr: Substep;
    en: Partial<Substep>;
}

interface SubstepButtonProps {
    substepNumber: number;
    onOpenModal: () => void;
}

export const SubstepButton: FC<SubstepButtonProps> = ({
    substepNumber,
    onOpenModal,
}) => {
    const [rawData, setRawData] = useState<SubstepData | null>(null);
    const popoverRef = useRef<HTMLDivElement>(null);
    const [popoverPos, setPopoverPos] = useState<{
        bottom: number;
        y: number;
    } | null>(null);
    const { setSelectedTool } = useTool();
    const { stepsValidated } = useProgression();
    const { setHoveredStep, resetHoveredStep } = useHoveredStep();

    const handleMouseEnter = () => {
        setHoveredStep(substepNumber);
        requestAnimationFrame(() => {
            if (popoverRef.current) {
                const rect = popoverRef.current.getBoundingClientRect();
                setPopoverPos({ bottom: rect.bottom, y: rect.y });
            }
        });
    };

    const handleMouseLeave = () => {
        resetHoveredStep();
    };

    useEffect(() => {
        const loadData = async () => {
            const data = await import(`@content/substep_${substepNumber}.json`);
            setRawData(data);
        };
        loadData();
    }, [substepNumber]);

    const handleModal = () => {
        setSelectedTool(substepNumber);
        onOpenModal();
    };

    const emptyData: SubstepData = {
        fr: { substep_name: "" },
        en: {},
    };

    const substepData = useContentWithTrad(rawData || emptyData);

    if (!rawData) return null;

    return (
        <article className={`substep-button substep-button--${substepNumber}`}>
            <button
                type="button"
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                onClick={handleModal}
                className={`substep-button__button ${
                    substepNumber == 7 && "substep-button__button--inactive"
                } ${
                    stepsValidated.includes(substepNumber) &&
                    "substep-button__button--validated"
                }`}>
                <span>{substepData?.substep_name}</span>
                {substepNumber < 7 && (
                    <div
                        ref={popoverRef}
                        className="substep-button__popover"
                        style={
                            popoverPos?.y &&
                            popoverPos?.bottom &&
                            popoverPos?.y < 0
                                ? { maxHeight: popoverPos.bottom }
                                : undefined
                        }>
                        <h3>{substepData?.substep_popover_title}</h3>
                        <p>{substepData?.substep_popover_text}</p>
                    </div>
                )}
            </button>
        </article>
    );
};