import m from 'mithril'
import htmlPage from './common/htmlPage.ts'
import { NavHelper } from './helpers/nav.ts'

export default async (
  reposConfig: any,
  eleventyConfig: any,
  data: any,
) => {
  const date = eleventyConfig.getFilter("date")
  const slugify = eleventyConfig.getFilter("slugify")
  const lineNumbers = eleventyConfig.getFilter("lineNumbers")
  const languageExtension = eleventyConfig.getFilter("languageExtension")
  const nav = NavHelper({
    reposConfig,
    slugify,
    currentRepoName: data.currentRepo.name,
    currentRefName: data.currentRef.name,
    currentRefType: data.currentRefType,
  })

  const repo = data.currentRepo

  return await htmlPage(reposConfig, eleventyConfig, data, [
    m('div', {class: "row"},
      m('div', {class: "col-auto"},
        m('div', {class: "bezel-secondary px-3 py-2"}, [
          m('h1', {class: "fs-2"}, data.patchInfo.commit.message.split('\n')[0]),
          m('div', {class: "input-group mb-2 flex-nowrap"}, [
            m('span', {class: "font-monospace input-group-text border-info text-white text-bg-dark overflow-scroll"}, data.patchInfo.commit.hash),
            m('button', {'data-copy-text': data.patchInfo.commit.hash, class: "btn btn-info shadow-none copy-button"}, 'Copy')
          ]),
          m('p', `${data.patchInfo.commit.author} | ${date(data.patchInfo.commit.date)}`),
          m('pre', {class: "mb-0"}, data.patchInfo.commit.message)
        ])
      )
    ),
    m('div', {class: "row my-4"},
      m('div', {class: "col-auto"}, [
        m('div', {class: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
            name: "unified",
            id: "splitModeSwitch",
            value: "split",
            onchange: "toggleUnifiedMode(this)",
            checked: true,
          }),
          m('label', {class: "form-check-label", for: "splitModeSwitch"}, 'Side-by-side'),
        ]),
        m('div', {class: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "radio",
            name: "unified",
            id: "unifiedModeSwitch",
            value: "unified",
            onchange: "toggleUnifiedMode(this)",
          }),
          m('label', {class: "form-check-label", for: "unifiedModeSwitch"}, 'Stacked')
        ])
      ])
    ),
    m('div', {class: "row", id: "diffs"}, data.patchInfo.commit.diffs.map((hunk) => {
      // Search through the available branches and tags, seeing if we have a copy of this
      // file in the filelist for any branch or tag. Put together a list of those for
      // linking to.
      let availableInRefs = repo.branches.filter((ref) => {
        return ref.fileList.has(hunk.fileName)
      }).map((ref) => {
        return { refName: ref.name, refType: 'branch' }
      })

      availableInRefs = availableInRefs.concat(repo.tags.filter((ref) => {
        return ref.fileList.has(hunk.fileName)
      }).map((ref) => {
        return { refName: ref.name, refType: 'tag' }
      }))

      return m('div', {class: 'hunk'}, [
        m('div', [
          m('span', {class: "font-monospace fw-bold me-2"}, `${hunk.fileName}:${hunk.lineNumber}`),
          m('label', {class: 'me-2'}, 'View file in:'),
          m('div', {class: 'dropdown d-inline'}, [
            m('button', {
              class: 'btn btn-bg btn-sm dropdown-toggle',
              ['data-bs-toggle']: 'dropdown',
            }, 'Select...'),
            // TODO: use tabs for branches and tags, like in the top menu?
            // TODO: Have a special case for if availableInRefs is empty (e.g. the file has since been deleted).
            m('ul', {class: 'dropdown-menu'}, availableInRefs.map((ref) => {
              return m('li', {class: 'dropdown-item'}, m('a', {
                href: nav.file(hunk.fileName, ref)
              }, ref.refName))
            }))
          ])
        ]),
        m('div', {class: "diff d-flex"}, [
          m('div', {class: "flex-grow-1 diff-left pe-2"}, [
            m('span', {class: 'font-monospace text-secondary'}, 'Before'),
            m('div', {class: "row"}, [
              m('div', {class: "col-auto border-end"},
                m('pre', {class: "mb-0"}, lineNumbers(hunk.beforeText).map((lineNumber) => {
                  if (lineNumber === null) { return '' }
                  return (lineNumber + hunk.lineNumber - 1).toString()
                }).join('\n'))
              ),
              m('div', {class: "col overflow-scroll"},
                m('pre', {class: "mb-0", 'data-start': hunk.lineNumber}, m('code', {'data-type': 'before', class: `code-diff line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}`}, m.trust(hunk.beforeText)))
              )
            ])
          ]),
          m('div', {class: "diff-right flex-grow-1"}, [
            m('span', {class: 'font-monospace text-secondary'}, 'After'),
            m('div', {class: "row"},
              m('div', {class: "col-auto border-end"},
                m('pre', {class: "mb-0"}, lineNumbers(hunk.afterText).map((lineNumber) => {
                  if (lineNumber === null) { return '' }
                  return (lineNumber + hunk.lineNumber - 1).toString()
                }).join('\n'))
              ),
              m('div', {class: "col overflow-scroll"},
                m('pre', {class: "mb-0", 'data-start': hunk.lineNumber},
                  m('code', {'data-type': "after", class: `line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}`}, m.trust(hunk.afterText))
                )
              )
            )
          ])
        ])
      ])
    })),
    m('script', m.trust(`
const toggleUnifiedMode = (e) => {
  const diffs = document.getElementById('diffs')
  const afterDiffs = document.querySelectorAll('.diff-right')
  if (e.value == "unified") {
    diffs.classList.add("unified")
  }
  else {
    diffs.classList.remove("unified")
  }
}
`)
    )
  ])
}