import { HOME_URL, HOST, HTTP_PROTOCOL } from "../../Config";
import API from "../../Utils/API/API";
import ComponentLoader from "../ComponentLoader/ComponentLoader";
import ErrorMessage from "../ErrorMessage/ErrorMessage";
import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
import URL from "../../../Types/API/URL";
import React, { useState } from "react";
import useAsyncEffect from "use-async-effect";
const DocumentationViewer = (props) => {
    const [markdown, setMarkdown] = useState("");
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState("");
    const populateWithEnvVars = (text) => {
        text = text.replace("{{serverUrl}}", HOME_URL.toString());
        text = text.replace("{{workflowId}}", props.workflowId.toString());
        text = text.replace("{{webhookSecretKey}}", props.webhookSecretKey || "Loading...");
        return text;
    };
    const loadDocs = async () => {
        if (props.documentationLink) {
            try {
                setIsLoading(true);
                const body = await API.get({
                    url: new URL(HTTP_PROTOCOL, HOST, props.documentationLink),
                    data: {},
                    headers: {
                        Accept: "text/plain",
                        "Content-Type": "text/plain",
                    },
                });
                setMarkdown(populateWithEnvVars(body.data.data.toString()));
                setIsLoading(false);
            }
            catch (err) {
                setIsLoading(false);
                setError(API.getFriendlyMessage(err));
            }
        }
    };
    useAsyncEffect(async () => {
        await loadDocs();
    }, [props.documentationLink]);
    return (React.createElement("div", { className: "mt-5 mb-5" },
        React.createElement("h2", { className: "text-base font-medium text-gray-500" }, "Documentation"),
        React.createElement("p", { className: "text-sm font-medium text-gray-400" }, "Here is some documentation for this component."),
        error ? React.createElement(ErrorMessage, { message: error }) : React.createElement(React.Fragment, null),
        isLoading ? React.createElement(ComponentLoader, null) : React.createElement(React.Fragment, null),
        React.createElement("div", { className: "mt-3" },
            React.createElement(MarkdownViewer, { text: markdown }))));
};
export default DocumentationViewer;
//# sourceMappingURL=DocumentationViewer.js.map