var Markdown = MarkdownToJSX;

//Apply Emojis
function PreparseMD(md) {
    md = ParseEmoji(md, "smr")
    md = ParseEmoji(md, "goober")
    md = ParseEmoji(md, "dead")
    md = ParseEmoji(md, "maxhappy")
    return md;
}

function ParseEmoji(md, keyword, image) {
    if (image == undefined) {
        image = keyword;
    }

    if (!image.includes(".")) {
        image += ".png";
    }

    return md.replaceAll(`:${keyword}:`, `![emoji](/Resources/Images/${image})`);
}

function App() {

    var [render, setRender] = React.useState(Math.random());
    var [content, setContent] = React.useState("");
    var docRef = React.useRef(null);
    window.setRender = setRender;


    var blog = window.location.href.substring(window.location.href.lastIndexOf('/') + 1)

    if (useFirstRender()) {
        setTimeout(async () => {
            var req = await fetch("/BlogContent/" + blog + ".md");

            if (!req.ok) {
                window.location.href = "../404";
            }

            content = await req.text();
            setContent(PreparseMD(content));
        }, 0)

    }

    setTimeout(() => {
        if (docRef && docRef.current != null) {
            //Replace Certain Bold Texts With Embeds
            var bolds = docRef.current.querySelectorAll("strong");
            
            bolds.forEach((l_bold) => {
                if (l_bold.innerText.startsWith("vid://")) {
                    l_bold.outerHTML = `
                    <iframe src="${l_bold.innerText.replace("vid://", "https://www.youtube.com/embed/")}" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    `
                }
                else if (l_bold.innerText.startsWith("model://")) {
                    l_bold.outerHTML = `
                    <model-viewer shadow-intensity="1" style="width: 100%; min-height: 300px; display: flex;" src="/Resources/3D/${l_bold.innerText.replace("model://", "")}.glb" camera-controls touch-action="pan-y"></model-viewer>
                    `
                }
                else if (l_bold.innerText.startsWith("audio://")) {
                    l_bold.outerHTML = `
                    <audio controls autoplay>
                    <source style="width: 100%; display: flex;" src="/Resources/Audio/${l_bold.innerText.replace("audio://", "")}.mp3" type="audio/mp3">
                    </audio>
                    `
                }
            });
        }
    }, 0);

    return (
        <>
            <SmorsleHeader noText="true"></SmorsleHeader>
            <div className="blogHeader">
                <h1>{blog}</h1>
            </div>

            <div className="blogInfo">
                <Button onPress={() =>   navigator.share({ title: blog + " On Smorles", text: "Read Awesome Blogs On Smorsles.com", url: window.location.href })} auto>&#xf7bd;</Button>
            </div>

            <div ref={docRef} className="blogContent preserveFont">
                {
                    MarkdownToJSX.compiler(content)
                }
            </div>
        </>
    );
}

addEventListener("keydown", (e) => {
    if (e.key == ";" && e.ctrlKey) {
        window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
    }
});

var domNode = document.getElementById('root');
var root = ReactDOM.createRoot(domNode);
root.render(<App/>);