window.onload = () => {
  const btnCheck = document.getElementById('btn-check')
  btnCheck.addEventListener('click', checkText)

  const textArea = document.getElementById('besana-editor')
  textArea.addEventListener('click', e => {
    handleClick(e)
  })

  let timerId = null

  // textArea.addEventListener('focus', () => {
  //   timerId = setTimeout(checkText, 2000)
  // })

  // textArea.addEventListener('input', () => {
  //   clearTimeout(timerId)
  //   timerId = setTimeout(checkText, 2000)
  // })
}

function handleClick(e) {
  switch (e.target) {
    case e.target.closest('span'):
      const clicked = e.target.closest('span')
      const infoText = clicked?.dataset.info
      const myComponent = document.querySelector('my-component')
      myComponent.setAttribute('my-attribute', infoText)
      console.log(clicked)
      break
  }
}

function checkText() {
  const textArea = document.getElementById('besana-editor')
  const textAreaContent = textArea?.innerHTML
  const text = createFirstParagraph(textAreaContent)
  const paragraphs = separateParagraphs(text)
  const modifiedParagraphs = paragraphs.map(
    async paragraph => await ajaxCheck(paragraph)
  )
  console.log(modifiedParagraphs)
  textArea.innerHTML = modifiedParagraphs.join('')
}

function createFirstParagraph(text) {
  const divRegex = /<div\b[^>]*>/i
  const firstDiv = text.match(divRegex)
  if (!firstDiv) return `<div>${text}</div>`
  const slicedText = text?.slice(0, firstDiv.index)
  const firstParagraph = `<div>${slicedText}</div>`
  const newText = firstParagraph + text.slice(firstDiv.index)
  return newText
}

function separateParagraphs(text) {
  let paragraphs = text.match(/<div>.*?<\/div>/g)
  return paragraphs
}

async function ajaxCheck(paragraph) {
  const url = 'http://localhost:225/api/v2/check'
  const data = {
    format: 'html',
    text: paragraph,
    language: 'sl',
    level: 'picky'
  }

  const formData = new URLSearchParams(data)
  const request = new Request(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: formData
  })
  fetch(request)
    .then(response => {
      console.log(response.status, response.statusText)
      if (!response.ok) {
        throw new Error('Network response was not ok')
      }
      console.log(response)
      return response.json()
    })
    .catch(error => {
      console.error(
        'Napaka pri pošiljanju zahteve za preverjanje besedila',
        error
      )
    })
}

function renderMistakes(matches, paragraph) {}

// //TODO: Popravi dodajanje presledkov
// function mockSpellChecker(text) {
//   const specificWords = ['Tole', 'nov', 'test']
//   const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '')
//   const modifiedWords = words.map(word => {
//     const wordWithoutTags = word.replace(/<[^>]*>/g, '')
//     if (specificWords.includes(wordWithoutTags)) {
//       return `<span class="typo-mistake" data-info="Dodaten text za posamezno napako">${word}</span>`
//     }
//     return word
//   })

//   // This is necessary to remove spaces between opening and closing tags
//   // TODO: improve this or find a better way to do it
//   return modifiedWords
//     .map((word, index) => {
//       if (index === 0 || index === 1 || index === modifiedWords.length - 1) {
//         return word
//       }
//       return ' ' + word
//     })
//     .join('')
// }