import { useState } from "react";
import { useTool } from "@/hooks/useTool";
import homeData from "@content/pages/home.json";
import { HomeData } from "@/types";
import { useProgression } from "@/hooks/useProgression";
import jauge1 from "@/assets/images/jauge-1.svg";
import jauge2 from "@/assets/images/jauge-2.svg";
import jauge3 from "@/assets/images/jauge-3.svg";
import jauge4 from "@/assets/images/jauge-4.svg";
import jauge5 from "@/assets/images/jauge-5.svg";
import jauge6 from "@/assets/images/jauge-6.svg";
import { ProgressionModal } from "@/components/ProgressionModal/ProgressionModal";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
import "./ProgressionWidget.scss";

const getJaugeImage = (steps: number[]) => {
    if (steps.length) {
        switch (steps.length) {
            case 1:
                return jauge1;
            case 2:
                return jauge2;
            case 3:
                return jauge3;
            case 4:
                return jauge4;
            case 5:
                return jauge5;
            case 6:
                return jauge6;
            default:
                return jauge1;
        }
    }
    return jauge1;
};

export const ProgressionWidget = () => {
    const data: HomeData = useContentWithTrad(homeData);
    const { totalTools, selectedTool } = useTool();
    const tools = Array.from({ length: totalTools });
    const { stepsValidated } = useProgression();
    const jaugeImage = getJaugeImage(stepsValidated);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleOpenModal = () => {
        setIsModalOpen(true);
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
    };

    return (
        <article className="progression-widget">
            <section className="progression-widget__steps">
                <h3>{data.steps}</h3>
                <ul className="progression-widget__list">
                    {tools.map((_, index) => (
                        <li
                            key={index}
                            className={`progression-widget__tool ${
                                stepsValidated.includes(index + 1) &&
                                "progression-widget__tool--validated"
                            }`}>
                            <span className="progression-widget__number">
                                {index + 1}
                            </span>
                        </li>
                    ))}
                </ul>
            </section>
            <section className="progression-widget__confidence">
                <h3>{data.confidence}</h3>
                <div>
                    <img
                        src={jaugeImage}
                        alt={`Jauge de progression - Étape ${selectedTool}`}
                        className="progression-widget__jauge"
                    />
                </div>
                <button
                    type="button"
                    className="progression-widget__details"
                    onClick={handleOpenModal}>
                    {data.details}
                </button>
            </section>
            {isModalOpen && <ProgressionModal onClose={handleCloseModal} />}
        </article>
    );
};