const supportedTools = ['cli', 'desktop', 'webui']
const detectedTools = new Set()

export default function displayToolSpecificContent () {
  let tool = getDefaultTool()

  if (!tool) tool = 'webui'

  const toolsInContent = findToolSpecificContent(tool)

  hideSwitcherLinks(toolsInContent)

  showContentForTool(tool)

  // configure links for switching tool content
  switcherLinks().forEach(link => {
    link.addEventListener('click', (event) => {
      event.preventDefault()
      showContentForTool(event.target.dataset.tool)
      findToolSpecificContent(event.target.dataset.tool)
    })
  })
}

function showContentForTool (tool) {
  // (de)activate switcher link appearances
  switcherLinks().forEach(link => {
    (link.dataset.tool === tool)
      ? link.classList.add('selected')
      : link.classList.remove('selected')
  })
}

function findToolSpecificContent (tool) {
  // find all tool-specific *block* elements and hide or show as appropriate
  // example: {{ #cli }} block content {{/cli}}
  Array.from(document.querySelectorAll('.extended-markdown'))
    .filter(el => supportedTools.some(tool => el.classList.contains(tool)))
    .forEach(el => {
      detectTools(el)
      el.style.display = el.classList.contains(tool)
        ? ''
        : 'none'
    })

  // find all tool-specific *inline* elements and hide or show as appropriate
  // example: <span class="tool-cli">inline content</span>
  Array.from(document.querySelectorAll('.tool-cli, .tool-desktop, .tool-webui'))
    .forEach(el => {
      detectTools(el)
      el.style.display = el.classList.contains('tool-' + tool)
        ? ''
        : 'none'
    })

  return Array.from(detectedTools)
}

// hide links for any tool-specific sections that are not present
function hideSwitcherLinks (toolsInContent) {
  Array.from(document.querySelectorAll('a.tool-switcher'))
    .forEach(link => {
      if (toolsInContent.includes(link.dataset.tool)) return
      link.style.display = 'none'
    })
}

function detectTools (el) {
  el.classList.forEach(elClass => {
    const value = elClass.replace(/tool-/, '')
    if (supportedTools.includes(value)) detectedTools.add(value)
  })
}

function getDefaultTool () {
  const el = document.querySelector('[data-default-tool]')
  if (el) return el.dataset.defaultTool
}

function switcherLinks () {
  return Array.from(document.querySelectorAll('a.tool-switcher'))
}