import React, { useEffect, useState } from "react";
import {Link, useParams} from "react-router-dom";
import "katex/dist/katex.min.css";
import "./MarkdownContent.css";
import MarkdownView from "./MarkdownView";
import PermissionGuard from "../PermissionGuard";
import {useMarkdown} from "../../utils/queries/markdown-queries";
import {usePath} from "../../utils/queries/path-queries";
import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";

const MarkdownContent = () => {
    const { id } = useParams();
    const [indexTitle, setIndexTitle] = useState(null);
    const {data: markdown, isLoading, error} = useMarkdown(id);
    const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
    const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
    const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
    const {data: template, isFetching: isTemplateFetching} = useMarkdownTemplate(templateSetting?.template_id);

    useEffect(() => {
        if(markdown && markdown.title === "index" && path){
            setIndexTitle(path.id === 1 ? "Home" : path.name);
        }
    }, [markdown, path]);


    const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching || isTemplateFetching;

    if (notReady) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message || "Failed to load content"}</div>;
    }

    return (
        <div className="markdown-content-container">
            <div className="field has-addons markdown-content-container-header">
                <h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
                <PermissionGuard rolesRequired={['admin']}>
                    <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
                        Edit
                    </Link>
                </PermissionGuard>
            </div>
            <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
        </div>
    );
};

export default MarkdownContent;