// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.

import { breakWord, meta } from './helper'
import AnchorJs from 'anchor-js'
import { html, render } from 'lit-html'
import { getTheme } from './theme'

/**
 * Initialize markdown rendering.
 */
export async function renderMarkdown() {
  renderWordBreaks()
  renderTables()
  renderAlerts()
  renderLinks()
  renderTabs()
  renderAnchor()
  renderCodeCopy()
  renderClickableImage()

  await Promise.all([
    renderMath(),
    renderMermaid()
  ])
}

async function renderMath() {
  const math = document.querySelectorAll('.math')
  if (math.length > 0) {
    await import('mathjax/es5/tex-svg-full.js')
  }
}

let mermaidRenderCount = 0

/**
 * Render mermaid diagrams.
 */
async function renderMermaid() {
  const diagrams = document.querySelectorAll<HTMLElement>('pre code.lang-mermaid')
  if (diagrams.length <= 0) {
    return
  }

  const { default: mermaid } = await import('mermaid')
  const theme = getTheme() === 'dark' ? 'dark' : 'default'

  // Turn off deterministic ids on re-render
  const deterministicIds = mermaidRenderCount === 0
  mermaid.initialize(Object.assign({ startOnLoad: false, deterministicIds, theme }, window.docfx.mermaid))
  mermaidRenderCount++

  const nodes = []
  diagrams.forEach(e => {
    // Rerender when elements becomes visible due to https://github.com/mermaid-js/mermaid/issues/1846
    if (e.offsetParent) {
      nodes.push(e.parentElement)
      e.parentElement.classList.add('mermaid')
      e.parentElement.innerHTML = e.innerHTML
    }
  })

  await mermaid.run({ nodes })
}

/**
 * Add <wbr> to break long text.
 */
function renderWordBreaks() {
  document.querySelectorAll<HTMLElement>('article h1,h2,h3,h4,h5,h6,.xref,.text-break').forEach(e => {
    if (e.innerHTML?.trim() === e.innerText?.trim()) {
      const children: (string | Node)[] = []
      for (const text of breakWord(e.innerText)) {
        if (children.length > 0) {
          children.push(document.createElement('wbr'))
        }
        children.push(text)
      }
      e.replaceChildren(...children)
    }
  })
}

/**
 * Make images in articles clickable by wrapping the image in an anchor tag.
 * The image is clickable only if its size is larger than 200x200 and it is not already been wrapped in an anchor tag.
 */
function renderClickableImage() {
  const MIN_CLICKABLE_IMAGE_SIZE = 200
  const imageLinks = Array.from(document.querySelectorAll<HTMLImageElement>('article a img[src]'))

  document.querySelectorAll<HTMLImageElement>('article img[src]').forEach(img => {
    if (shouldMakeClickable()) {
      makeClickable()
    } else {
      img.addEventListener('load', () => {
        if (shouldMakeClickable()) {
          makeClickable()
        }
      })
    }

    function makeClickable() {
      const a = document.createElement('a')
      a.target = '_blank'
      a.rel = 'noopener noreferrer nofollow'
      a.href = img.src
      img.replaceWith(a)
      a.appendChild(img)
    }

    function shouldMakeClickable(): boolean {
      return img.naturalWidth > MIN_CLICKABLE_IMAGE_SIZE &&
        img.naturalHeight > MIN_CLICKABLE_IMAGE_SIZE &&
        !imageLinks.includes(img)
    }
  })
}

/**
 * Styling for tables in conceptual documents using Bootstrap.
 * See http://getbootstrap.com/css/#tables
 */
function renderTables() {
  document.querySelectorAll('table').forEach(table => {
    table.classList.add('table', 'table-bordered', 'table-condensed')
    const wrapper = document.createElement('div')
    wrapper.className = 'table-responsive'
    table.parentElement.insertBefore(wrapper, table)
    wrapper.appendChild(table)
  })
}

/**
 * Styling for alerts.
 */
function renderAlerts() {
  document.querySelectorAll('.NOTE, .TIP').forEach(e => e.classList.add('alert', 'alert-info'))
  document.querySelectorAll('.WARNING').forEach(e => e.classList.add('alert', 'alert-warning'))
  document.querySelectorAll('.IMPORTANT, .CAUTION').forEach(e => e.classList.add('alert', 'alert-danger'))
}

/**
 * Open external links to different host in a new window.
 */
function renderLinks() {
  if (meta('docfx:disablenewtab') === 'true') {
    return
  }

  document.querySelectorAll<HTMLAnchorElement>('article a[href]').forEach(a => {
    if (a.hostname !== window.location.hostname && a.innerText.trim() !== '') {
      a.target = '_blank'
      a.rel = 'noopener noreferrer nofollow'
      a.classList.add('external')
    }
  })
}

/**
 * Render anchor # for headings
 */
function renderAnchor() {
  const anchors = new AnchorJs()
  anchors.options = Object.assign({
    visible: 'hover',
    icon: '#'
  }, window.docfx.anchors)

  anchors.add('article h2:not(.no-anchor), article h3:not(.no-anchor), article h4:not(.no-anchor)')
}

/**
 * Render code copy button.
 */
function renderCodeCopy() {
  document.querySelectorAll<HTMLElement>('pre>code').forEach(code => {
    if (code.innerText.trim().length === 0) {
      return
    }

    let copied = false
    renderCore()

    function renderCore() {
      const dom = copied
        ? html`<a class='btn border-0 link-success code-action'><i class='bi bi-check-lg'></i></a>`
        : html`<a class='btn border-0 code-action' title='copy' href='#' @click=${copy}><i class='bi bi-clipboard'></i></a>`
      render(dom, code.parentElement)

      async function copy(e) {
        e.preventDefault()
        await navigator.clipboard.writeText(code.innerText)
        copied = true
        renderCore()
        setTimeout(() => {
          copied = false
          renderCore()
        }, 1000)
      }
    }
  })
}

/**
 * Render tabbed content.
 */
function renderTabs() {
  updateTabStyle()

  const contentAttrs = {
    id: 'data-bi-id',
    name: 'data-bi-name',
    type: 'data-bi-type'
  }

  const Tab = (function() {
    function Tab(li, a, section) {
      this.li = li
      this.a = a
      this.section = section
    }
    Object.defineProperty(Tab.prototype, 'tabIds', {
      get: function() { return this.a.getAttribute('data-tab').split(' ') },
      enumerable: true,
      configurable: true
    })
    Object.defineProperty(Tab.prototype, 'condition', {
      get: function() { return this.a.getAttribute('data-condition') },
      enumerable: true,
      configurable: true
    })
    Object.defineProperty(Tab.prototype, 'visible', {
      get: function() { return !this.li.hasAttribute('hidden') },
      set: function(value) {
        if (value) {
          this.li.removeAttribute('hidden')
          this.li.removeAttribute('aria-hidden')
        } else {
          this.li.setAttribute('hidden', 'hidden')
          this.li.setAttribute('aria-hidden', 'true')
        }
      },
      enumerable: true,
      configurable: true
    })
    Object.defineProperty(Tab.prototype, 'selected', {
      get: function() { return !this.section.hasAttribute('hidden') },
      set: function(value) {
        if (value) {
          this.a.setAttribute('aria-selected', 'true')
          this.a.classList.add('active')
          this.a.tabIndex = 0
          this.section.removeAttribute('hidden')
          this.section.removeAttribute('aria-hidden')
        } else {
          this.a.setAttribute('aria-selected', 'false')
          this.a.classList.remove('active')
          this.a.tabIndex = -1
          this.section.setAttribute('hidden', 'hidden')
          this.section.setAttribute('aria-hidden', 'true')
        }
      },
      enumerable: true,
      configurable: true
    })
    Tab.prototype.focus = function() {
      this.a.focus()
    }
    return Tab
  }())

  initTabs(document.body)

  function initTabs(container) {
    const queryStringTabs = readTabsQueryStringParam()
    const elements = container.querySelectorAll('.tabGroup')
    const state = { groups: [], selectedTabs: [] }
    for (let i = 0; i < elements.length; i++) {
      const group = initTabGroup(elements.item(i))
      if (!group.independent) {
        updateVisibilityAndSelection(group, state)
        state.groups.push(group)
      }
    }
    container.addEventListener('click', function(event) { return handleClick(event, state) })
    if (state.groups.length === 0) {
      return state
    }
    selectTabs(queryStringTabs)
    updateTabsQueryStringParam(state)
    return state
  }

  function initTabGroup(element) {
    const group = {
      independent: element.hasAttribute('data-tab-group-independent'),
      tabs: []
    }
    let li = element.firstElementChild.firstElementChild
    while (li) {
      const a = li.firstElementChild
      a.setAttribute(contentAttrs.name, 'tab')
      const dataTab = a.getAttribute('data-tab').replace(/\+/g, ' ')
      a.setAttribute('data-tab', dataTab)
      const section = element.querySelector('[id="' + a.getAttribute('aria-controls') + '"]')
      const tab = new Tab(li, a, section)
      group.tabs.push(tab)
      li = li.nextElementSibling
    }
    element.setAttribute(contentAttrs.name, 'tab-group')
    element.tabGroup = group
    return group
  }

  function updateVisibilityAndSelection(group, state) {
    let anySelected = false
    let firstVisibleTab
    for (let _i = 0, _a = group.tabs; _i < _a.length; _i++) {
      const tab = _a[_i]
      tab.visible = tab.condition === null || state.selectedTabs.indexOf(tab.condition) !== -1
      if (tab.visible) {
        if (!firstVisibleTab) {
          firstVisibleTab = tab
        }
      }
      tab.selected = tab.visible && arraysIntersect(state.selectedTabs, tab.tabIds)
      anySelected = anySelected || tab.selected
    }
    if (!anySelected) {
      for (let _b = 0, _c = group.tabs; _b < _c.length; _b++) {
        const tabIds = _c[_b].tabIds
        for (let _d = 0, tabIds1 = tabIds; _d < tabIds1.length; _d++) {
          const tabId = tabIds1[_d]
          const index = state.selectedTabs.indexOf(tabId)
          if (index === -1) {
            continue
          }
          state.selectedTabs.splice(index, 1)
        }
      }
      const tab = firstVisibleTab
      tab.selected = true
      state.selectedTabs.push(tab.tabIds[0])
    }
  }

  function getTabInfoFromEvent(event) {
    if (!(event.target instanceof HTMLElement)) {
      return null
    }
    const anchor = event.target.closest('a[data-tab]')
    if (anchor === null) {
      return null
    }
    const tabIds = anchor.getAttribute('data-tab').split(' ')
    const group = anchor.parentElement.parentElement.parentElement.tabGroup
    if (group === undefined) {
      return null
    }
    return { tabIds, group, anchor }
  }

  function handleClick(event, state) {
    const info = getTabInfoFromEvent(event)
    if (info === null) {
      return
    }
    event.preventDefault()
    info.anchor.href = 'javascript:'
    setTimeout(function() {
      info.anchor.href = '#' + info.anchor.getAttribute('aria-controls')
    })
    const tabIds = info.tabIds; const group = info.group
    const originalTop = info.anchor.getBoundingClientRect().top
    if (group.independent) {
      for (let _i = 0, _a = group.tabs; _i < _a.length; _i++) {
        const tab = _a[_i]
        tab.selected = arraysIntersect(tab.tabIds, tabIds)
      }
    } else {
      if (arraysIntersect(state.selectedTabs, tabIds)) {
        return
      }
      const previousTabId = group.tabs.filter(function(t) { return t.selected })[0].tabIds[0]
      state.selectedTabs.splice(state.selectedTabs.indexOf(previousTabId), 1, tabIds[0])
      for (let _b = 0, _c = state.groups; _b < _c.length; _b++) {
        const group1 = _c[_b]
        updateVisibilityAndSelection(group1, state)
      }
      updateTabsQueryStringParam(state)
    }
    notifyContentUpdated()
    const top = info.anchor.getBoundingClientRect().top
    if (top !== originalTop && event instanceof MouseEvent) {
      window.scrollTo(0, window.pageYOffset + top - originalTop)
    }
  }

  function selectTabs(tabIds) {
    for (let _i = 0, tabIds1 = tabIds; _i < tabIds1.length; _i++) {
      const tabId = tabIds1[_i]
      const a = document.querySelector('.tabGroup > ul > li > a[data-tab="' + tabId + '"]:not([hidden])')
      if (a === null) {
        return
      }
      a.dispatchEvent(new CustomEvent('click', { bubbles: true }))
    }
  }

  function readTabsQueryStringParam() {
    const qs = new URLSearchParams(window.location.search)
    const t = qs.get('tabs')
    if (!t) {
      return []
    }
    return t.split(',')
  }

  function updateTabsQueryStringParam(state) {
    const qs = new URLSearchParams(window.location.search)
    qs.set('tabs', state.selectedTabs.join())
    const url = location.protocol + '//' + location.host + location.pathname + '?' + qs.toString() + location.hash
    if (location.href === url) {
      return
    }
    history.replaceState({}, document.title, url)
  }

  function arraysIntersect(a, b) {
    for (let _i = 0, a1 = a; _i < a1.length; _i++) {
      const itemA = a1[_i]
      for (let _a = 0, b1 = b; _a < b1.length; _a++) {
        const itemB = b1[_a]
        if (itemA === itemB) {
          return true
        }
      }
    }
    return false
  }

  function updateTabStyle() {
    document.querySelectorAll('div.tabGroup>ul').forEach(e => e.classList.add('nav', 'nav-tabs'))
    document.querySelectorAll('div.tabGroup>ul>li').forEach(e => e.classList.add('nav-item'))
    document.querySelectorAll('div.tabGroup>ul>li>a').forEach(e => e.classList.add('nav-link'))
    document.querySelectorAll('div.tabGroup>section').forEach(e => e.classList.add('card'))
  }

  function notifyContentUpdated() {
    renderMermaid()
  }
}