// this is taken from here:
// https://dev.to/rfornal/creating-a-document-fragment-5g7l
let fragmentFromString = (stringHTML) => {
  let temp = document.createElement('template')
  temp.innerHTML = stringHTML
  return temp.content
}

let createNumberLabel = (content) => fragmentFromString(`
  <span
    style="${`
      min-width: 14px;
      display: flex;
      justify-content: center;
      background-color: #FFA500;
    `}"
    class="card-label mod-card-front card-number"
  >
    <span class="label-text">
      ${content}
    </span>
  </span>
`)

// #########
// #       #
// # utils #
// #       #
// #########

let getHref = (e) => e.getAttribute('href')

let getCardNumber = (s) => {
  if (!s) {return}
  const number = s.match(/\/\d+/g)
  return number ? number.pop().split('/').pop() : ''
}

let onReady = (callback = () => {}) => {
  const retryInterval = setInterval(() => {
    const readyState = document.readyState
    const isLabelList = Boolean(document.querySelectorAll('.list-card-labels'))
    const board = Boolean(document.querySelector('#board'))

    if (readyState === 'complete' && isLabelList && board) {
      clearInterval(retryInterval)
      callback()
    }
  }, 2000)
}

// #####################
// #                   #
// # mutation observer #
// #                   #
// #####################

let options = {
  childList: true,
  subtree: true,
  attributes: true,
},
observer = new MutationObserver(mCallback)

function mCallback(mutations) {
  for (let mutation of mutations) {
    switch (mutation.type) {
      case 'childList':
        if (mutation.addedNodes.length) {
          const cardNodes = [...mutation.addedNodes].filter((node) => {
            if (!node.tagName || !node.tagName === 'DIV') {
              return false
            }
            const targetClass = node.getAttribute('class')
            const expectClass = 'list-card js-member-droppable'
            return targetClass === expectClass
          })
          addNumberOnMutation(cardNodes)
        }
        break
    }
  }
}

function addNumberOnMutation(addedNodes) {
  addedNodes.forEach(setCardNumber)
}

// ########
// #      #
// # main #
// #      #
// ########

function setCardNumber(cardElement) {
  const isCardNumber = cardElement.querySelector('.card-number')

  if (isCardNumber) {return}

  const href = getHref(cardElement)

  if (!href) {
    // if no href call it again every 100ms
    setTimeout(function() {
      setCardNumber(cardElement)
    }, 100)
    return
  }

  const cardNumber = getCardNumber(href)
  const listCardLabels = cardElement.querySelector('.list-card-labels')
  const numberElement = createNumberLabel(cardNumber)

  listCardLabels.prepend(numberElement)
}

let main = () => {
  const listCard = document.querySelectorAll('.list-cards .list-card')

  listCard.forEach(setCardNumber)
}

// #######
// #     #
// # run #
// #     #
// #######

onReady(() => {
  // initialize the numbers
  main()

  // turn on the observer
  const board = document.querySelector('#board')
  observer.observe(board, options)

  const {showText} = JSON.parse(localStorage.labelState) || {}

  // make the labels to show
  if (!showText) {
    localStorage.labelState = JSON.stringify({"showText": false})
    document.querySelector('.card-number').click()
  }
})