import { AppendLoadingSymbol } from "@/seqta/ui/Loading"
import stringToHTML from "./stringToHTML"
import { delay } from "./delay"
import { settingsState } from "./listeners/SettingsState"
import browser from "webextension-polyfill"
import LogoLightOutline from "@/resources/icons/betterseqta-light-outline.png"
import { animate, stagger } from "motion"

export async function SendNewsPage() {
  console.info("[BetterSEQTA+] Started Loading News Page")
  document.title = "News ― SEQTA Learn"
  await delay(100)

  const element = document.querySelector("[data-key=news]")
  element!.classList.add("active")

  // Remove all current elements in the main div to add new elements
  const main = document.getElementById("main")
  main!.innerHTML = ""

  const html = stringToHTML(/* html */ `
    <div class="home-root">
      <div class="home-container" id="news-container">
      <h1 class="border">Latest Headlines in ${settingsState.newsSource ? settingsState.newsSource.charAt(0).toUpperCase() + settingsState.newsSource.slice(1) : "Australia"}</h1>
      </div>
    </div>`)

  main!.append(html.firstChild!)

  const titlediv = document.getElementById("title")!.firstChild
  ;(titlediv! as HTMLElement).innerText = "News"
  AppendLoadingSymbol("newsloading", "#news-container")

  const response = (await browser.runtime.sendMessage({
    type: "sendNews",
    source: settingsState.newsSource,
  })) as any
  const newscontainer = document.querySelector("#news-container")
  document.getElementById("newsloading")?.remove()

  // Create a document fragment to batch DOM operations
  const fragment = document.createDocumentFragment()

  // Map over articles to create elements
  response.news.articles.forEach((article: any) => {
    const newsarticle = document.createElement("a")
    newsarticle.classList.add("NewsArticle")
    newsarticle.href = article.url
    newsarticle.target = "_blank"

    const articleimage = document.createElement("div")
    articleimage.classList.add("articleimage")

    if (article.urlToImage == "null" || article.urlToImage == null) {
      articleimage.style.cssText = `
        background-image: url(${browser.runtime.getURL(LogoLightOutline)});
        width: 20%;
        margin: 0 7.5%;
      `
    } else {
      articleimage.style.backgroundImage = `url(${article.urlToImage})`
    }

    const articletext = document.createElement("div")
    articletext.classList.add("ArticleText")

    const title = document.createElement("a")
    title.innerText = article.title
    title.href = article.url
    title.target = "_blank"

    const description = document.createElement("p")

    article.description =
      article.description.length > 400
        ? article.description.substring(0, 400) + "..."
        : article.description
    description.innerHTML = article.description

    articletext.append(title, description)
    newsarticle.append(articleimage, articletext)
    fragment.append(newsarticle)
  })

  // Single DOM update to append all articles
  newscontainer?.append(fragment)

  if (!settingsState.animations) return

  const articles = Array.from(document.querySelectorAll(".NewsArticle"))

  animate(
    articles.slice(0, 20),
    { opacity: [0, 1], y: [10, 0], scale: [0.99, 1] },
    {
      delay: stagger(0.1),
      type: "spring",
      stiffness: 341,
      damping: 20,
      mass: 1,
    },
  )
}