import m from 'mithril'
import htmlPage from './common/htmlPage.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")

  return await htmlPage(reposConfig, eleventyConfig, data, [
    m('div', {class: "row"},
      m('div', {class: "col-auto"},
        m('div', {class: "bezel-secondary px-3 py-2 commit-info"}, [
          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 form-check-inline"}, [
          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 form-check-inline"}, [
          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: "form-check"}, [
          m('input', {
            class: "form-check-input",
            type: "checkbox",
            name: "wrap",
            id: "wrapCheckbox",
            value: "wrap",
            onchange: "toggleWordWrap(this)",
          }),
          m('label', {class: "form-check-label", for: "wrapCheckbox"}, 'Wrap long lines')
        ])
      ])
    ),
    m('div', {class: "row", id: "diffs"}, data.patchInfo.commit.diffs.map((hunk) => {
      return m('div', {class: 'hunk'}, [
        m('span', {class: "font-monospace fw-bold"},
          m('a', {
            href: `${data.reposPath}/${slugify(data.patchInfo.repoName)}/${data.patchInfo.type}/${slugify(data.patchInfo.refName)}/files/${hunk.fileName.split('/').map((filePart) => { return filePart.split('.').map((subpart) => { return slugify(subpart)}).join('.')}).join('/')}.html`
          }, `${hunk.fileName}:${hunk.lineNumber}`)
        ),
        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 diffs = document.getElementById('diffs')

const toggleUnifiedMode = (e) => {
  const afterDiffs = document.querySelectorAll('.diff-right')
  if (e.value == "unified") {
    diffs.classList.add("unified")
  }
  else {
    diffs.classList.remove("unified")
  }
}

const toggleWordWrap = (e) => {
  if (e.checked) {
    diffs.classList.add('wrap')
  }
  else {
    diffs.classList.remove('wrap')
  }
}
`)
    )
  ])
}