async function RenderMarkdown(mountPoint, values) {
    if (!values.markdownId) return;

    const response = await fetch(`/api/v1/markdowns/${values.markdownId}`);
    markdownData = await response.json();

    document.title = markdownData.name;

    mountPoint.innerHTML = `
    <div class="boards">
        <div class="boards_sidebar">
            <div class="boards_sidebar__save_button" id="save_button"> Save </div>
            <div class="boards_sidebar__button" id="change_view_button"> Edit Markdown </div>
            <div class="boards_sidebar__button" id="add_image_button"> Add Image </div>
        </div>
        <div class="markdowns_display">
            <div class="markdown_document">
            </div>
        </div>
    </div>
`

    let doc = mountPoint.querySelector(".markdown_document")
    const renderer = {
        image(token) {
            console.log(token)
            let r = /^(.*)#(!?)(\d+)x(!?)(\d+)$/
            let matches = token.match(r)
            let style = ""
            if (matches && matches.length >= 4) {
                let [_, src, bx, x, by, y] = matches
                token = src

                let width = ""
                let height = ""
                if (+x != 0) {
                    width = `${bx === '' ? "max-" : ""}width: ${x}px; `
                } else {
                    width = `width: auto; `
                }
                if (+y != 0) {
                    height = `${by === '' ? "max-" : ""}height: ${y}px; `
                } else {
                    height = `height: auto; `
                }
                style = `style="${width}${height}"`
                console.log(style)
            }
            return `<img src="${token}" ${style}></img>`
        }
    }
    marked.use({ renderer })
    doc.innerHTML = marked.parse(markdownData.text)

    const save = async () => {
        if (view === "markdown") {
            markdownData.text = doc.innerText
        }

        const response = await fetch(`/api/v1/markdowns/${markdownData.id}`,
            {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                method: "PUT",
                body: JSON.stringify(markdownData)
            })
        const result = await response.text();

        console.log(result)
        setSaveButtonState(false)
    }

    const save_button = mountPoint.querySelector("#save_button")

    save_button.addEventListener('click', async (e) => {
        if (e.button !== 0) return

        await save()
    })

    const setSaveButtonState = (needToSave) => {
        if (needToSave) {
            save_button.classList.remove('boards_sidebar__button')
            save_button.classList.add('boards_sidebar__save_button')
        } else {
            save_button.classList.add('boards_sidebar__button')
            save_button.classList.remove('boards_sidebar__save_button')
        }
    }

    setSaveButtonState(false)
    doc.addEventListener('input', () => {
        setSaveButtonState(true)
    })

    document.addEventListener('keydown', async e => {
        if (e.ctrlKey && e.code === 'KeyS') {
            e.preventDefault();

            await save()
        }
    });

    let view = "rendered"
    const change_view_button = mountPoint.querySelector("#change_view_button")

    change_view_button.addEventListener('click', async (e) => {
        if (e.button !== 0) return

        if (view === "markdown") {
            view = "rendered"
            markdownData.text = doc.innerText

            doc.innerHTML = marked.parse(markdownData.text)
            doc.contentEditable = "false"

            change_view_button.innerText = "Edit Markdown"
        } else if (view === "rendered") {
            view = "markdown"
            doc.innerText = markdownData.text

            doc.contentEditable = "true"

            change_view_button.innerText = "View Rendered"
        }
    })

    const addImageButton = mountPoint.querySelector("#add_image_button")

    addImageButton.addEventListener('click', async (e) => {
        const imageId = await fullScreenImageSelect()
        markdownData.text += `\n![](/api/v1/images/${imageId})`

        if (view === "markdown") {
            doc.innerText = markdownData.text
        } else if (view === "rendered") {
            doc.innerHTML = marked.parse(markdownData.text)
        }

        setSaveButtonState(true)
    })

    document.addEventListener("paste", async (e) => {
        for (const file of e.clipboardData.files) {
            if (!file.type.startsWith('image/')) return;

            const response = await fetch(`/api/v1/images/${file.name}`,
                {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    method: "PUT",
                    body: await file.arrayBuffer()
                })
            const imageId = (await response.json()).image;

            markdownData.text += `\n![](/api/v1/images/${imageId})`
            if (view === "markdown") {
                doc.innerText = markdownData.text
            } else if (view === "rendered") {
                doc.innerHTML = marked.parse(markdownData.text)
            }

            setSaveButtonState(true)
        }
    })
}