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

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

  return `
    <div class="row mt-3 mb-1">
      <div class="col">
        <p class="d-inline-block">Showing commits from <span class="font-monospace me-2">${data.patchPage.branchName}</span><a class="btn btn-outline-primary badge shadow-none" href="${nav.repoCurrentBranchRssFeed()}"><img src="${nav.rootPath()}frontend/img/rss-icon.svg" style="width: 11px; margin-right: 5px;" />RSS</a></p>
      </div>
    </div>

    <nav>
      <ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            <li class="page-item">
              <a class="page-link ${pageObj.pageNumber === data.patchPage.pageNumber ? 'active' : ''}" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${data.patchPage.branchName}/commits/page${pageObj.pageNumber}">${pageObj.pageNumber}</a>
            </li>
          `
        }).join('')}
      </ul>
    </nav>

    <div>
      ${data.patchPage.commits.map((commit) => {
        return `
          <div class="bezel-gray p-2 my-2" style="max-width: 40rem;">
            <a class="fs-5" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${slugify(data.patchPage.branchName)}/commits/${commit.hash}">
              ${commit.message.split('\n').slice(0, 1)}
            </a>
            <br />
            <span>${date(commit.date)}</span>
            <br />
            <span>${commit.author}</span>
            <p class="commit-hash font-monospace mb-0">${commit.hash}</p>
          </div>
        `
      }).join('')}
    </div>

    <nav>
      <ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            <li class="page-item">
              <a class="page-link ${pageObj.pageNumber === data.patchPage.pageNumber ? 'active' : ''}" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${data.patchPage.branchName}/commits/page${pageObj.pageNumber}">${pageObj.pageNumber}</a>
            </li>
          `
        }).join('')}
      </ul>
    </nav>
  `
}