const initiateBlog = () => {
  const root = document.getElementById("body-element");
  let blogRoot = document.createElement("div");
  blogRoot.id = "blog-root";
  blogRoot.innerHTML = "<p>This is the blog</p>";
  root?.appendChild(blogRoot);

  const styleElement = document.createElement("style");
  const style =
    "#blog-root {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: blue; padding: 32px; overflow-y: scroll; z-index: 99999999;}";
  styleElement.appendChild(document.createTextNode(style));
  const head = document.getElementsByTagName("head")[0];
  head.appendChild(styleElement);
};

const removeIfNotBlogInHistory = () => {
  window.onpopstate = history.pushState = function (e) {
    const pathElements = window.location.href.split("/");
    if (!pathElements.includes("blog")) {
      const blogRoot = document.getElementById("blog-root");
      blogRoot?.remove();
    }
  };
};

const getBlogNavAndInjectStyleToHeader = () => {
  const blogNav = document.createElement("div");
  blogNav.style = "display: flex; justify-content: space-between; width: calc(100% - 96px); padding: 32px 48px; background-color: #001054; color: white;"
  const img = document.createElement("img");
  const blogTitle = document.createElement("span");
  blogTitle.textContent = "Blog";
  const imgWrapper = document.createElement("a");
  const blogTitleWrapper = document.createElement("a");
  blogTitleWrapper.style = "color: #ff0099; padding-top: 4px; font-weight: 800; font-size: 18px;text-decoration: none;";
  img.src = "https://s3.eu-central-1.amazonaws.com/giteditor.app/gitEditorBlogLogo.png";
  img.alt = "logo";
  imgWrapper.href = "/";
  blogTitleWrapper.href = "/blog";
  const src = document.getElementById("header");
  img.style.width="100px";
  imgWrapper.appendChild(img);
  blogTitleWrapper.appendChild(blogTitle);
  blogNav.appendChild(imgWrapper);
  blogNav.appendChild(blogTitleWrapper);
  return blogNav;
};

const getBlogRootAfterInjectingItToHost = () => {
  document.body.style.overflow = "hidden";
  const root = document.getElementById("body-element");
  let blogRoot = document.createElement("div");

  const styleElement = document.createElement("style");
  const style = `
  #blog-root {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    z-index: 99999999;
    font-family: Arial, Helvetica, sans-serif;
  }`;
  styleElement.textContent = style;
  blogRoot.id = "blog-root";
  const head = document.getElementsByTagName("head")[0];
  head.appendChild(styleElement);
  root?.appendChild(blogRoot);
  return blogRoot;
};

// Render views
const renderBlogHome = async () => {
  const blogRoot = getBlogRootAfterInjectingItToHost();
  const response = await fetch("https://publish.giteditor.app/frontpage");
  const html = await response.text();
  const headerNav = getBlogNavAndInjectStyleToHeader();
  blogRoot.insertAdjacentHTML("beforeend", headerNav.outerHTML);
  blogRoot.insertAdjacentHTML("beforeend", html);
};

const renderBlogPost1 = async (route) => {
  const blogRoot = getBlogRootAfterInjectingItToHost();
  const response = await fetch("https://publish.giteditor.app" + route);
  const html = await response.text();
  const headerNav = getBlogNavAndInjectStyleToHeader();
  blogRoot.insertAdjacentHTML("beforeend", headerNav.outerHTML);
  blogRoot.insertAdjacentHTML("beforeend", html);
};

const renderBlogPost2 = (postText) => {
  const root = document.getElementById("body-element");
  let blogRoot = document.createElement("div");
  blogRoot.id = "blog-root";
  blogRoot.innerHTML = "<p>This is the blog</p>";

  const styleElement = document.createElement("style");
  const style =
    "#blog-root {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #f3f3f3; background-color: red; padding: 32px;}";
  styleElement.appendChild(document.createTextNode(style));
  // blogRoot.style = styleElement;
  const head = document.getElementsByTagName("head")[0];
  head.appendChild(styleElement);

  let postContainer = document.createElement("div");
  postContainer.id = "blog-root";
  postContainer.innerHTML = "Blog Post 2";

  blogRoot.appendChild(postContainer);
  root?.appendChild(blogRoot);
};

const renderRoute = () => {
  const pathElements = window.location.href.split("/");
  const indexOfBlog = pathElements.indexOf("blog");
  if (indexOfBlog >= 0) {
    const postName = pathElements[pathElements.length > indexOfBlog + 1 ? indexOfBlog + 1 : -1];
    const postNameOrEmpty = typeof postName !== "undefined" ? "/" + pathElements[indexOfBlog + 1] : "";
    const route = "/" + pathElements[indexOfBlog] + postNameOrEmpty
    if (route === "/blog") {
      renderBlogHome();
    } else if (route === "/") {
      location.href = "/blog";
    } else {
      renderBlogPost1(route);
    }
  }
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    const viewportmeta = document.querySelector('meta[name=viewport]');
    viewportmeta.setAttribute('content', "initial-scale=1.0");
   }
};

renderRoute();
// 0.0.4