const FORM = document.getElementById("search-form"),
      INPUT = FORM?.querySelector("input[type='search']"),
      SUBMIT = FORM?.querySelector("button[type='submit']"),
      AUTOCOMPLETE = document.getElementById("autocomplete"),
      ENTRIES = document.getElementById("entries")



function getURL(id = 13998098) {
  return `https://en.wikipedia.org/?curid=${id}`
}



const LIST_SPINNER = document.createElement("span")
LIST_SPINNER.className = "list-group-item list-group-item-info"
LIST_SPINNER.innerHTML = '<span class="spinner-grow" role="status"></span>'

const LIST_NO_RESULTS = document.createElement("span")
LIST_NO_RESULTS.className = "list-group-item list-group-item-danger"
LIST_NO_RESULTS.innerHTML = 'There are no results<i class="bi bi-emoji-frown-fill ms-2"></i>'

const LIST_EXAMPLE = document.createElement("span")
LIST_EXAMPLE.className = "list-group-item list-group-item-info"
LIST_EXAMPLE.innerHTML = 'e.g. "Cat"'



let api = "",
    autocompleteAbortController




INPUT?.addEventListener("input", async(event) => {
  
  SUBMIT.disabled = false
  
  const { value: SEARCH } = event.currentTarget
  
  api = `https://en.wikipedia.org/w/api.php?origin=*&format=json&action=query&generator=search&gsrsearch=${SEARCH}`
  
  
  
  if (SEARCH) {
    
    if (AUTOCOMPLETE?.firstChild == LIST_SPINNER) {
      autocompleteAbortController?.abort()
    } else {
      AUTOCOMPLETE?.replaceChildren(LIST_SPINNER)
    }
    
    autocompleteAbortController = new AbortController()
    
    try {
      
      const { query: { pages } = { pages: {} } } = await fetch(api, { signal: autocompleteAbortController.signal }).then(res => res.json()),
            arr = Object.values(pages)

      if (arr.length) {
        AUTOCOMPLETE?.replaceChildren(...arr.map(({pageid, title}) => {
          const A = document.createElement("a")
          A.href = getURL(pageid)
          A.target = "_blank"
          A.className = "list-group-item list-group-item-action list-group-item-primary"
          A.textContent = title
          return A
        }))
      } else {
        AUTOCOMPLETE?.replaceChildren(LIST_NO_RESULTS)
        SUBMIT.disabled = true
      }
      
    } catch(err) {
      if (err.name !== "AbortError") {
        console.error(err)
      }
    }
    
  } else {
    autocompleteAbortController?.abort()
    AUTOCOMPLETE?.replaceChildren(LIST_EXAMPLE)
    
    SUBMIT.disabled = true
  }
})




FORM?.addEventListener("keydown", event => {
  if (AUTOCOMPLETE?.hasChildNodes()) {
    switch(event.code) {
      case "ArrowUp":
        event.preventDefault();
        ((AUTOCOMPLETE.contains(document.activeElement) && document.activeElement?.previousElementSibling) || AUTOCOMPLETE.lastElementChild)?.focus()
        break
      
      case "ArrowDown":
        event.preventDefault();
        ((AUTOCOMPLETE.contains(document.activeElement) && document.activeElement?.nextElementSibling) || AUTOCOMPLETE.firstElementChild)?.focus()
        break
      
      case "Enter":
        break
      
      default:
        INPUT?.focus()
    }
  }
})




const LOADING_ENTRY = document.createElement("article")
LOADING_ENTRY.className = "bg-light bg-gradient p-2 border rounded-3 shadow"

const LOADING_ENTRY_TITLE = document.createElement("h2")
LOADING_ENTRY_TITLE.className = "placeholder-glow"
LOADING_ENTRY_TITLE.innerHTML = '<span class="placeholder col-3"></span>'
LOADING_ENTRY.appendChild(LOADING_ENTRY_TITLE)


const LOADING_ENTRY_P = document.createElement("p")
LOADING_ENTRY_P.className = "placeholder-glow"

for (let i = 0; i < 16; i++) {
  const SPAN = document.createElement("span")
  SPAN.className = `placeholder col-${Math.floor(Math.random() * 5) + 4}`
  LOADING_ENTRY_P.appendChild(SPAN)
}

LOADING_ENTRY.appendChild(LOADING_ENTRY_P)


const ENTRY_NO_RESULTS = document.createElement("h1")
ENTRY_NO_RESULTS.className = "text-light text-center lh-base"
ENTRY_NO_RESULTS.innerHTML = 'There are no results<i class="bi bi-emoji-frown-fill text-warning ms-3"></i>'




let entryAbortController



// FORM?.addEventListener("submit", async(event) => {  /* Strange Bug in CodePen, triggers "Referred From Pen" message */
SUBMIT?.addEventListener("click", async(event) => {
  
  event.preventDefault()
  
  autocompleteAbortController?.abort()
  
  SUBMIT.disabled = true
  
  if (ENTRIES?.firstChild == LOADING_ENTRY) {
    entryAbortController?.abort()
  } else {
    ENTRIES?.replaceChildren(LOADING_ENTRY)
  }
  
  entryAbortController = new AbortController()
  
  
  try {
    
    const { query: { pages } = { pages: {} } } = await fetch(api + "&prop=extracts|pageimages&exintro=1", { signal: entryAbortController.signal }).then(res => res.json())
  
    AUTOCOMPLETE?.replaceChildren()  // Remove all child nodes

    const arr = Object.values(pages)


    if (arr.length) {
      ENTRIES?.replaceChildren(...arr.map(({ title, thumbnail, pageimage, extract, pageid }) => {
        const ARTICLE = document.createElement("article"),
              A = document.createElement("a"),
              H2 = document.createElement("h2")

        ARTICLE.className = "bg-light bg-gradient pt-2 pt-md-3 px-2 px-md-3 pb-md-1 border rounded-3 shadow"

        A.className = "text-decoration-none"
        A.href = getURL(pageid)
        A.target = "_blank"

        H2.textContent = title
        A.appendChild(H2)

        if (pageimage && thumbnail) {
          const IMG = document.createElement("img")
          IMG.src = thumbnail.source
          IMG.title = pageimage
          IMG.className = "float-end img-thumbnail m-2"
          A.appendChild(IMG)
        }

        A.insertAdjacentHTML("beforeend", extract)

        ARTICLE.appendChild(A)

        return ARTICLE
      }))

      SUBMIT.disabled = false
    } else {
      ENTRIES?.replaceChildren(ENTRY_NO_RESULTS)
    }
    
  } catch(err) {
    if (err.name !== "AbortError") {
      console.error(err)
    }
  }
})