let trpcState = JSON.parse(document.getElementById("trpc-dehydrated-state").innerText);
let postData = trpcState.queries.find((q) => q.queryKey[0].includes("singlePost")).state.data.post;
let postElement = document.createElement("cohost-post");
postElement.setAttribute("avatarSrc", postData.postingProject.avatarURL);
postElement.setAttribute("avatarShape", postData.postingProject.avatarShape);
postElement.setAttribute("displayName", postData.postingProject.displayName);
postElement.setAttribute("handle", postData.postingProject.handle);
postElement.setAttribute("permalink", postData.singlePostPageUrl);
postElement.setAttribute("publishedAt", postData.publishedAt);
if (postData.headline) {
    postElement.setAttribute("singlePostHeadline", postData.headline);
}
postElement.setAttribute("tags", postData.tags.join(","));

if (postData.shareTree && postData.shareTree.length) {
    postElement.setAttribute("sharedItems", "");
    let sharedFrom = postData.shareTree[postData.shareTree.length - 1];
    postElement.setAttribute("sharedAvatarSrc", sharedFrom.postingProject.avatarURL);
    postElement.setAttribute("sharedAvatarShape", sharedFrom.postingProject.avatarShape);
    postElement.setAttribute("sharedDisplayName", sharedFrom.postingProject.displayName);
    postElement.setAttribute("sharedHandle", sharedFrom.postingProject.handle);
    
    let shareTree = [...postData.shareTree, postData];
    for (sharedPost of shareTree) {
        if (sharedPost.transparentShareOfPostId !== null) {
            continue;
        }
        let sharedElement = document.createElement("cohost-shared-item");
        sharedElement.setAttribute("avatarSrc", sharedPost.postingProject.avatarURL);
        sharedElement.setAttribute("avatarShape", sharedPost.postingProject.avatarShape);
        sharedElement.setAttribute("displayName", sharedPost.postingProject.displayName);
        sharedElement.setAttribute("handle", sharedPost.postingProject.handle);
        if (sharedPost.headline) {
            sharedElement.setAttribute("headline", sharedPost.headline);
        }
        sharedElement.setAttribute("permalink", sharedPost.singlePostPageUrl);
        sharedElement.setAttribute("publishedAt", sharedPost.publishedAt);
        sharedElement.setAttribute("tags", sharedPost.tags.join(","));
        let sharedIdElement = document.getElementById(`post-${sharedPost.postId}`);
        if (sharedIdElement) {
            sharedElement.innerHTML = sharedIdElement.parentElement.querySelector("[data-post-body]").innerHTML;
        }
        postElement.appendChild(sharedElement);
    }
} else {
    let postIdElement = document.getElementById(`post-${postData.postId}`);
    if (postIdElement) {
        postElement.innerHTML = document.getElementById(`post-${postData.postId}`).parentElement.querySelector("[data-post-body]").innerHTML;
    }
}

let outputContainer = document.createElement("div");
outputContainer.id = "cohost-wc-bookmarklet-output"
outputContainer.style = "position: fixed; bottom: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; z-index: 100";

let outputTextarea = document.createElement("textarea");
outputTextarea.value = postElement.outerHTML;
outputTextarea.rows = 5;
outputTextarea.cols = 20;
outputTextarea.style = "font-size: inherit; line-height: 1.4";
outputContainer.append(outputTextarea);

let outputDismissButton = document.createElement("button");
outputDismissButton.innerText = "dismiss";
outputDismissButton.onclick = function() { outputContainer.remove(); }
outputContainer.append(outputDismissButton);

document.body.append(outputContainer);