import branchesListItems from '../dist/js_templates/common/branchesListItems.js'

const setCheckbox = window.setCheckbox
const currentTheme = window.currentTheme

if (setCheckbox) {
  setCheckbox(currentTheme, document.getElementById('dark-mode-switch'))
}

const copyCommand = (event) => {
  const elem = event.target
  const cloneText = elem.dataset.copyText
  const originalInnerText = elem.innerText
  navigator.clipboard.writeText(cloneText).then(() => {
    elem.innerText = "Copied"
  })

  window.setTimeout(() => {
    elem.innerText = originalInnerText
  }, 5000)
}

const createClonePopover = (popoverBtn, url) => {
  const div = document.createElement('div')
  // div.id = "clone-popover"
  div.innerHTML = `
    <label class='form-label'>HTTPS URL</label>
    <div class='input-group d-flex flex-nowrap'>
      <span class='clone overflow-scroll input-group-text'>${url || window.cloneUrl}</span>
      <button data-copy-text='${url || window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='copy-button'>Copy</button>
    </div>`

  div.querySelector("#copy-button").addEventListener('click', copyCommand)

  // const popoverBtn = document.querySelector(".clone-popover-btn")
  const bsPopover = new bootstrap.Popover(popoverBtn, {
    sanitize: false,
    html: true,
    content: div,
    title: 'Clone',
    placement: 'bottom',
    container: 'body',
  })

  window.popovers.push(bsPopover)
}

const toggleLastTouch = (event) => {
  const isOn = event.target.checked
  setShowLastTouch(isOn)
}

const toggleRenderedContent = (event) => {
  const isOn = event.target.checked
  setRenderedContent(isOn)
}

const renderedContent = document.querySelector(".rendered-content")
const codeContent = document.querySelector(".code-content")
const annotations = document.getElementById("annotations")

const setShowLastTouch = (isOn) => {
  if (isOn) {
    annotations.classList.remove("d-none")
  } else {
    annotations.classList.add("d-none")
  }
}

const setRenderedContent = (isOn) => {
  if (isOn) {
    renderedContent.classList.remove("d-none")
    codeContent.classList.add("d-none")
  } else {
    renderedContent.classList.add("d-none")
    codeContent.classList.remove("d-none")
  }
}

document.getElementById("showLastTouch")?.addEventListener('click', toggleLastTouch)
document.getElementById("showRenderedContent")?.addEventListener('click', toggleRenderedContent)

const copyPull = (event) => {
  const hash = event.target.dataset.hash
  const copiedAlert = document.createElement('span')
  copiedAlert.innerText = "Copied"

  navigator.clipboard.writeText(hash).then(() => {
    event.target.parentElement.appendChild(copiedAlert)
  })

  window.setTimeout(() => {
    copiedAlert.remove()
  }, 5000)
}

document.querySelectorAll(".copy-btn").forEach((element) => {
  element.addEventListener("click", copyPull)
})

const dropdownBranchesResults = document.getElementById('dropdown-branches-results')

const searchBox = document.getElementById('dropdownBranchSearch')

searchBox?.addEventListener('input', (event) => {
  const searchTerm = event.target.value
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch, sortDirection)
})

let sortDirection = document.querySelector("[name=branchSort]:checked")?.value || 'date'

const showBranchesResults = (searchTerm) => {
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch, sortDirection)
}

document.querySelectorAll('.sort-filter').forEach((element) => {
  element.addEventListener('change', (event) => {
    sortDirection = event.target.value
    showBranchesResults(searchBox.value)
  })
})

const bootstrap = window.bootstrap
const jsVars = window.jsVars
window.popovers ||= []

document.querySelectorAll('.clone-popover-btn').forEach((button) => {
  createClonePopover(button, button.dataset['copyText'])
})
document.querySelectorAll(".copy-button").forEach((button) => {
  button.addEventListener('click', copyCommand)
})

document.addEventListener('click', (event) => {
  const target = event.target
  // If they didn't click the .clone-popover-btn or if we're not inside of
  // popover, or if we *are* inside of a popover but a different one than the
  // current one, then close the popover.
  const parentPopover = target.closest(".popover")
  if (
    !target.classList.contains("clone-popover-btn")
    && parentPopover === null
  ) {
    window.popovers.forEach(popover => popover.hide())
  }
})

showBranchesResults(searchBox.value)

const pageLoadLastTouch = document.getElementById("showLastTouch")
if (pageLoadLastTouch) {
  setShowLastTouch(pageLoadLastTouch.checked)
}

const pageLoadRenderedContent = document.getElementById("showRenderedContent")
if (pageLoadRenderedContent) {
  setRenderedContent(pageLoadRenderedContent.checked)
}