import {NavHelper} from './helpers/nav.ts'

export default async (eleventyConfig: any, data: any, nav: ReturnType<typeof NavHelper>) => {
  const date = eleventyConfig.getFilter("date")
  const slugify = eleventyConfig.getFilter("slugify")
  const lineNumbers = eleventyConfig.getFilter("lineNumbers")
  const languageExtension = eleventyConfig.getFilter("languageExtension")

  return `
    <div class="row">
      <div class="col-auto">
        <div class="bezel-secondary px-3 py-2">
          <h1>${data.patchInfo.commit.message.split('\n')[0]}</h2>
          <div class="input-group mb-2">
            <span class="font-monospace input-group-text border-info text-white text-bg-dark">${data.patchInfo.commit.hash}</span>
            <button data-copy-text='${data.patchInfo.commit.hash}' class="btn btn-info shadow-none" id="copy-button">Copy</button>
          </div>
          <p>${date(data.patchInfo.commit.date)}</p>
          <p>${data.patchInfo.commit.author}</p>
          <pre>${data.patchInfo.commit.message}</pre>
        </div>
      </div>
    </div>
    <div class="row my-4">
      <div class="col-auto">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="unified" id="splitModeSwitch" value="split" onchange="toggleUnifiedMode(this)" checked>
          <label class="form-check-label" for="splitModeSwitch">
            Side-by-side
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="unified" id="unifiedModeSwitch" value="unified" onchange="toggleUnifiedMode(this)">
          <label class="form-check-label" for="unifiedModeSwitch">
            Stacked
          </label>
        </div>
      </div>
    </div>
    <div class="row" id="diffs">
      ${data.patchInfo.commit.diffs.map((hunk) => {
        return `
          <div class=hunk>
            <span class="font-monospace fw-bold"><a href="${data.reposPath}/${slugify(data.patchInfo.repoName)}/branches/${slugify(data.patchInfo.branchName)}/files/${slugify(hunk.fileName)}.html">${hunk.fileName}:${hunk.lineNumber}</a></span>
            <div class="diff d-flex">
              <div class="flex-grow-1 diff-left pe-2">
                <span class='font-monospace text-secondary'>Before</span>
                <div class="row">
                  <div class="col-auto border-end"><pre>
${lineNumbers(hunk.beforeText).map((lineNumber) => {
  return (lineNumber + hunk.lineNumber - 1).toString()
}).join('\n')}</pre></div>
                  <div class="col overflow-scroll">
                    <pre data-start="${hunk.lineNumber}"><code data-type="before" class="line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}">${hunk.beforeText}</code></pre>
                  </div>
                </div>
              </div>
              <div class="diff-right flex-grow-1">
                <span class='font-monospace text-secondary'>After</span>
                <div class="row">
                  <div class="col-auto border-end"><pre>
${lineNumbers(hunk.beforeText).map((lineNumber) => {
  return (lineNumber + hunk.lineNumber - 1).toString()
}).join('\n')}</pre></div>
                  <div class="col overflow-scroll">
                    <pre data-start="${hunk.lineNumber}"><code data-type="after" class="line-numbers language-${languageExtension(hunk.fileName, data.patchInfo.repoName)}">${hunk.afterText}</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `
      }).join('')}
    </div>

    <script>
      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")
        }
      }
    </script>
  `
}