import {branchesListItems} from '../dist/js_templates/repo.js'

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

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

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

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

const createClonePopover = () => {
  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-hidden input-group-text'>${window.cloneUrl}</span>
      <button data-clone-url='${window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='clone-button'>Copy</button>
    </div>`

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

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

  document.body.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.id !== "clone-popover-btn"
      && (
        parentPopover === null
        || parentPopover !== bsPopover.tip)
    ) {
      bsPopover.hide()
    }
  })
}

const toggleLastTouch = (event) => {
  const isOn = event.target.checked
  const annotations = document.getElementById("annotations")
  if (isOn) {
    annotations.classList.remove("d-none")
  } else {
    annotations.classList.add("d-none")
  }
}

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

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')
document.getElementById('dropdownBranchSearch')?.addEventListener('input', (event) => {
  const searchTerm = event.target.value
  console.log(searchTerm)
  let branches = window.branchesWithHrefs.filter((branch) => {
    return branch.name.includes(searchTerm)
  })
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch)
})

const bootstrap = window.bootstrap
const jsVars = window.jsVars

if (document.getElementById('clone-popover-btn')) {
  createClonePopover()
}