import { FC, useEffect, useRef, useState } from "react";
import { Button } from "@/components/UI/Button/Button";
import { DialogWrapper } from "@/components/UI/DialogWrapper/DialogWrapper";
import "./ToolModal.scss";
import ReactMarkdown from "react-markdown";
import flagIcon from "@/assets/icons/flag.svg";
import leftArrow from "@/assets/icons/left_arrow.svg";
import rightArrow from "@/assets/icons/right_arrow.svg";
import { useTool } from "@/hooks/useTool";
import { useProgression } from "@/hooks/useProgression";
import { getMediaPath } from "@/utils/mediaImport";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
interface ToolData {
    name?: string;
    description?: string;
    subtitles?: string;
    dev_step?: string;
    keywords?: string;
    content?: string;
    schema?: string;
}

interface RawToolData {
    fr: ToolData;
    en: Partial<ToolData>;
}

interface ModalWording {
    button: string;
    tab_1: string;
    tab_2: string;
}

interface RawModalWording {
    fr: ModalWording;
    en: Partial<ModalWording>;
}

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

export const ToolModal: FC<ToolModalProps> = ({ onClose }) => {
    const [rawData, setRawData] = useState<RawToolData | null>(null);
    const [rawModalWording, setRawModalWording] =
        useState<RawModalWording | null>(null);
    const [selectedTab, setSelectedTab] = useState<string>("tab1");
    const { totalTools, selectedTool, setSelectedTool } = useTool();
    const { addStepValidated, setStepValidated } = useProgression();
    const videoRef = useRef<HTMLVideoElement>(null);

    useEffect(() => {
        const getToolData = async () => {
            const [data, modalWording] = await Promise.all([
                import(`@content/tools/tool_${selectedTool}.json`),
                import("@content/modals/tool_modal.json"),
            ]);
            setRawData(data);
            setRawModalWording(modalWording);
        };

        if (selectedTool && selectedTool < 7) {
            getToolData();
        } else if (selectedTool && selectedTool === 7) {
            addStepValidated(selectedTool);
            setStepValidated(selectedTool);
        }
    }, [selectedTool]);

    const toolData = useContentWithTrad(rawData || { fr: {}, en: {} });
    const wording = useContentWithTrad(
        rawModalWording || { fr: { button: "", tab_1: "", tab_2: "" }, en: {} }
    );
    const markdown = toolData.content || "";

    const handleClose = () => {
        onClose();
    };

    const handlePrevious = () => {
        if (selectedTool && selectedTool > 1) {
            setSelectedTool(selectedTool - 1);
        }
    };

    const playVideo = () => {
        if (videoRef.current) {
            videoRef.current.play();
        }
        if (selectedTool) {
            addStepValidated(selectedTool);
            setStepValidated(selectedTool);
        }
    };

    const handleNext = () => {
        if (selectedTool && selectedTool < totalTools) {
            setSelectedTool(selectedTool + 1);
        }
    };

    const getMediaFromMarkdown = (linkToParse: string): string => {
        const parsedLink = linkToParse.match(/\((.*?)\)/)?.[1];
        return `/${parsedLink}`;
    };

    const parsedMarkdown = (markdown: string) => {
        const markdownArray = markdown.split(/(!\[\]\(public\/images\/.*?\))/);
        return markdownArray.map((string) =>
            string.includes("public/images/") ? (
                <img
                    src={getMediaPath(
                        getMediaFromMarkdown(string),
                        "publicImages"
                    )}
                />
            ) : (
                <ReactMarkdown>{string}</ReactMarkdown>
            )
        );
    };

    return (
        <>
            <DialogWrapper onClose={handleClose} hasCloseButton>
                {selectedTool && selectedTool > 1 && (
                    <img
                        className="tool-modal__nav tool-modal__nav--left"
                        src={leftArrow}
                        onClick={handlePrevious}
                        alt="Outil précédent"
                    />
                )}

                {selectedTool && selectedTool < totalTools && (
                    <img
                        src={rightArrow}
                        alt="Outil suivant"
                        className="tool-modal__nav tool-modal__nav--right"
                        onClick={handleNext}
                    />
                )}

                <article className="tool-modal">
                    <main className="tool-modal__left-content">
                        <div className="tool-modal__tabs-container">
                            <div
                                className={`tool-modal__tabs ${
                                    selectedTab === "tab1"
                                        ? "tool-modal__tabs--tab1"
                                        : "tool-modal__tabs--tab2"
                                }`}>
                                {wording?.tab_1 && (
                                    <button
                                        className="tool-modal__tab"
                                        role="tab"
                                        id="tab1"
                                        aria-selected={selectedTab === "tab1"}
                                        aria-controls="panel1"
                                        onClick={() => setSelectedTab("tab1")}>
                                        {wording?.tab_1}
                                    </button>
                                )}
                                {wording?.tab_2 && (
                                    <button
                                        className="tool-modal__tab"
                                        role="tab"
                                        id="tab2"
                                        aria-selected={selectedTab === "tab2"}
                                        aria-controls="panel2"
                                        onClick={() => setSelectedTab("tab2")}>
                                        {wording?.tab_2}
                                    </button>
                                )}
                                <div className="tool-modal__glider"></div>
                            </div>
                        </div>
                        {selectedTab === "tab1" && (
                            <div className="tool-modal__video-container">
                                <div className="tool-modal__video-wrapper">
                                    <video
                                        ref={videoRef}
                                        className="tool-modal__video"
                                        src={getMediaPath(
                                            `/src/assets/videos/tool_${selectedTool}.webm`,
                                            "videos"
                                        )}
                                    />
                                </div>

                                {wording?.button && (
                                    <div className="tool-modal__launch-button">
                                        <Button
                                            label={wording.button}
                                            onClick={playVideo}
                                        />
                                    </div>
                                )}
                            </div>
                        )}

                        {selectedTab === "tab2" && (
                            <div className="tool-modal__markdown">
                                {parsedMarkdown(markdown)}
                            </div>
                        )}
                    </main>
                    <aside className="tool-modal__right-content">
                        <header className="tool-modal__header">
                            <h2 className="tool-modal__title">
                                {toolData?.name}
                            </h2>
                            <p className="tool-modal__subtitle">
                                {toolData?.subtitles}
                            </p>
                        </header>
                        <main className="tool-modal__body">
                            {toolData?.description && (
                                <p className="tool-modal__description">
                                    {toolData.description}
                                </p>
                            )}
                        </main>
                        <footer className="tool-modal__footer">
                            <hr />
                            <div className="tool-modal__badges">
                                <div className="tool-modal__icon">
                                    <img
                                        src={flagIcon}
                                        alt="drapeau"
                                        className="tool-modal__flag"
                                    />
                                </div>
                                <div className="tool-modal__badges-container">
                                    {toolData?.dev_step && (
                                        <div className="tool-modal__badge">
                                            {toolData.dev_step}
                                        </div>
                                    )}
                                    {toolData?.keywords && (
                                        <p className="tool-modal__keywords">
                                            {toolData.keywords}
                                        </p>
                                    )}
                                </div>
                            </div>
                        </footer>
                    </aside>
                </article>
            </DialogWrapper>
        </>
    );
};