import { FC } from "react";
import { DialogWrapper } from "@/components/UI/DialogWrapper/DialogWrapper";
import progressionContent from "@content/modals/progression_modal.json";
import { useProgression } from "@/hooks/useProgression";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
import "./ProgressionModal.scss";
import { getMediaPath } from "@/utils/mediaImport";
import { useTrad } from "@/hooks/useTrad";

interface ProgressionModalProps {
    onClose: () => void;
}

export const ProgressionModal: FC<ProgressionModalProps> = ({ onClose }) => {
    const { stepsValidated } = useProgression();
    const { language } = useTrad();

    const content = useContentWithTrad(progressionContent);

    const lastStep =
        stepsValidated.length > 0 ? Math.max(...stepsValidated) : null;
    const mediaFilePath =
        language === "en"
            ? lastStep
                ? `/src/assets/images/Synthese-English-0${lastStep + 1}.svg`
                : `/src/assets/images/Synthese-English-01.svg`
            : lastStep
            ? `/src/assets/images/Synthese-0${lastStep + 1}.svg`
            : `/src/assets/images/Synthese-01.svg`;

    return (
        <DialogWrapper onClose={onClose} title={content.title} hasCloseButton>
            <article className="progression-modal">
                <img
                    className="progression-modal__image"
                    src={getMediaPath(mediaFilePath, "images")}
                    alt="progression"
                />
            </article>
        </DialogWrapper>
    );
};