// REMOVE STYLE FOR EDITOR PURPOSES
const removePlaceholderStyle = () => {
  document.querySelectorAll(".leader-embed").forEach((embed) => {
    embed.classList.remove("leader-embed");
  });
};

removePlaceholderStyle();

const make = (parent, type, className = " ") => {
  const element = document.createElement(type);
  const classArray = className.split(" ").filter((d) => d);
  if (classArray.length > 0) element.classList.add(...classArray);
  parent.appendChild(element);
  return element;
};

const selectedLeader = leaderData.find((d) => d.last === CURRENT);

// SET PARTY COLOR
document
  .querySelector(":root")
  .style.setProperty("--party-color", selectedLeader?.color);

// CREATE NAV
const makeNav = () => {
  const nav = document.createElement("div");
  nav.classList.add("leader-nav");
  const toggle = document.createElement("div");
  toggle.classList.add("toggle");
  const toggleIcon = document.createElement("div");
  toggle.appendChild(toggleIcon);
  toggle.addEventListener("click", () => nav.classList.toggle("open"));
  nav.appendChild(toggle);

  leaderData.forEach((ldr) => {
    const container = document.createElement("div");
    const a = document.createElement("a");
    a.setAttribute("href", ldr.link);

    const div = document.createElement("div");
    const name = document.createTextNode(ldr.last);
    const logo = document.createElement("img");
    logo.classList.add("logo");
    logo.src = ldr.logo;

    a.addEventListener("mouseover", () => {
      a.style.backgroundColor = ldr.color;
      a.style.color = "white";
      logo.src = ldr.logoWhite;
    });
    a.addEventListener("mouseleave", () => {
      a.style.backgroundColor = "white";
      a.style.color = "#2c2c2c";
      logo.src = ldr.logo;
    });

    container.appendChild(a);
    a.appendChild(logo);
    a.appendChild(div);
    div.appendChild(name);

    if (CURRENT === ldr.last) {
      container.classList.add("selected");
      logo.src = ldr.logoWhite;
    }
    nav.appendChild(container);
  });

  const label = document.querySelector(".article-label");
  const banner = document.querySelector(".alert-banner");

  const child = label || banner;
  console.log(child);
  //if (!child) return console.log("Leader nav");

  const body = child.parentElement;

  body.insertBefore(nav, child);
};
var mobileNav = false;
const resizeNav = () => {
  const nav = document.querySelector(".leader-nav");
  if (!nav) return;

  if (window.innerWidth < 1000 && !mobileNav) {
    mobileNav = true;
    nav.classList.add("mobile");
  }
  if (window.innerWidth >= 1000 && mobileNav) {
    mobileNav = false;
    nav.classList.remove("mobile");
  }
};
makeNav();
resizeNav();
window.addEventListener("resize", resizeNav);

//CREATE SIDEBAR
const makeSidebar = (leader) => {
  const sidebar = document.querySelector(".leader-sidebar");
  sidebar.innerHTML = "";
  const imageDiv = make(sidebar, "div", "image-div");
  // const logo = make(imageDiv, "div", "sidebar-logo");
  // logo.style.backgroundImage = `url("${leader.logo}")`;
  const img = make(imageDiv, "img");
  img.setAttribute("src", selectedLeader.cutout);

  const nameDiv = make(sidebar, "div", "name-div");
  const name = make(nameDiv, "div", "name");
  name.innerText = leader.name;
  const title = make(nameDiv, "div", "title");
  title.innerText = leader.title;

  const statsDiv = make(sidebar, "div", "stats-div");
  leader.stats.forEach((stat) => {
    const s = make(statsDiv, "div");
    const split = stat.split(":");
    s.innerHTML = `<span>${split[0]}:</span>${split[1]}`;
  });
};

makeSidebar(selectedLeader);

//CREATE Q&A
const makeQA = (leader) => {
  const QAdiv = document.createElement("div");
  QAdiv.classList.add("QA-div");
  const QAtitle = make(QAdiv, "h2", "QA-title");
  QAtitle.innerText = "Questions & Answers";

  const lastP = document.querySelector("div.articleBody > p:last-child");
  const body = document.querySelector(".articleBody");
  body.insertBefore(QAdiv, lastP.nextSibling);
};
//makeQA(selectedLeader);

//CREATE NEXT LEADER LINK
const makeNextLink = (leader) => {
  const currentIndex = leaderData.findIndex((d) => d === leader);
  const next =
    leaderData[currentIndex === leaderData.length - 1 ? 0 : currentIndex + 1];

  const div = document.querySelector(".next-leader");
  const link = make(div, "a");
  link.setAttribute("href", next.link);
  link.innerText = `Next: ${next.name}`;
  link.style.borderBottom = `3px solid ${next.color}`;
};
makeNextLink(selectedLeader);

// SET PARENT HEIGHT FOR STICKY
const setNavContainerHeight = () => {
  const articleBody = document.querySelector(".articleBody");
  const contentWrapper = document.querySelector(".content > .content-wrapper");
  if (!articleBody || !contentWrapper) return;

  const articleHeight = articleBody.offsetHeight;
  contentWrapper.style.height =
    window.innerWidth <= 769 ? "auto" : `${articleHeight}px`;
};
setNavContainerHeight();
window.addEventListener("resize", setNavContainerHeight);

// COLOR PARTY TAGS IN RIDING TABLES
const colorTags = () => {
  document
    .querySelectorAll(".riding-profile table td:nth-child(1)")
    .forEach((td) => {
      const color = leaderData.find(
        (leader) => leader.partyShort === td.innerText
      )?.color;
      if (color) td.style.backgroundColor = color;
      //td.classList.add(td.innerText.toUpperCase());
    });

  const current = document.querySelector(".riding-vote-history td");
  const riding = document.querySelector(".riding-title");
  if (riding) {
    riding.style.backgroundColor = current.style.backgroundColor;
  }
};
colorTags();

var isMobile = false;
const changeLinks = () => {
  if (window.innerWidth < 600 && !isMobile) {
    isMobile = true;
    document.querySelectorAll(".riding-profile td a").forEach((link) => {
      link.innerText = "";
    });
  }
  if (window.innerWidth >= 600 && isMobile) {
    isMobile = false;
    document.querySelectorAll(".riding-profile td a").forEach((link) => {
      link.innerText = "Official site";
    });
  }
};
changeLinks();
window.addEventListener("resize", changeLinks);