export default async (eleventyConfig: any, data: any) => {
  const isDirectory = eleventyConfig.getFilter("isDirectory")
  const topLevelFilesOnly = eleventyConfig.getFilter("topLevelFilesOnly")
  const getDirectoryContents = eleventyConfig.getFilter("getDirectoryContents")
  const getFileContents = eleventyConfig.getFilter("getFileContents")
  const getFileLastTouchInfo = eleventyConfig.getFilter("getFileLastTouchInfo")
  const getRelativePath = eleventyConfig.getFilter("getRelativePath")
  const slugify = eleventyConfig.getFilter("slugify")
  const lineNumbers = eleventyConfig.getFilter("lineNumbers")
  const highlightCode = eleventyConfig.getFilter("highlightCode")
  const languageExtension = eleventyConfig.getFilter("languageExtension")
  const renderContentIfAvailable = eleventyConfig.getFilter("renderContentIfAvailable")

  return `
    <div class="row mt-3 mb-1">
      <div class="col">
        <p>Files snapshot from <span class="font-monospace">${data.fileInfo.branchName}</span></p>
      </div>
    </div>
    <div class="row my-1">
      <div class="col">
        <h3>
          <span class="bezel-gray px-1"><a href="${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files">./</a></span>${
            data.fileInfo.file.split('/').map((dir, index, arr) => {
              if (index === arr.length - 1) {
                return `<span class="px-2">${dir}</span>`
              }
              else {
                return `<span class="bezel-gray px-1"><a href="${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).join('/')}">${dir}</a></span>`
              }
            }).join('')
          }
        </h3>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p><a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/raw/${data.fileInfo.file.split('.').map(filePart => slugify(filePart)).join('.')}">View raw file</a></p>
      </div>
    </div>
    ${isDirectory(data.fileInfo.file, data.fileInfo.repoName, data.fileInfo.branchName) ?
    `<div class="row">
      <div class="col">
        <ul class="list-group">
          ${topLevelFilesOnly(getDirectoryContents(data.fileInfo.repoName, data.fileInfo.branchName, data.fileInfo.file), data.fileInfo.file + '/').map((dir) => {
            return `<li class="list-group-item">
              ${dir.isDirectory ? `<span>&#x1F4C1;</span>` : ''}
              <a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/files/${dir.fullPath.split('/').map((pathPart) => slugify(pathPart)).join('/')}">${getRelativePath(data.fileInfo.file, dir.name)}</a>
            </li>`
          }).join('')}
        </ul>
      </div>
    </div>`
    :
    `
    ${data.fileInfo.file.endsWith(".md")
      ? `
        <div class="row">
          <div class="col">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" role="switch" id="showRenderedContent" checked />
              <label class="form-check-label" for="showRenderedContent">Show rendered markdown</label>
            </div>
          </div>
        </div>
        <div class="row rendered-content py-4">
          <div class="col">
            ${await renderContentIfAvailable(await getFileContents(
              data.fileInfo.repoName,
              data.fileInfo.branchName,
              data.fileInfo.file
            ), data.fileInfo.branchName)}
          </div>
        </div>
        `
      : ''
    }
    <div class="row code-content ${data.fileInfo.file.endsWith('.md') ? 'd-none' : ''}">
      <div class="col">
        <div class="row py-2">
          <div class="col-auto">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" role="switch" id="showLastTouch">
              <label class="form-check-label" for="showLastTouch">Show last line change</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-auto p-0">
            <code style="white-space: pre;"><pre class="language-text">${lineNumbers(await getFileContents(data.fileInfo.repoName, data.fileInfo.branchName, data.fileInfo.file)).map((lineNumber) => {
              return lineNumber
            }).join('\n')}</pre></code>
          </div>
          <div id="annotations" class="col-auto d-none p-0">
            <code style="white-space: pre;"><pre class="language-text">${
              (await getFileLastTouchInfo(
                data.fileInfo.repoName,
                data.fileInfo.branchName,
                data.fileInfo.file
              )).map(
                (annotation) => {
                  return `<a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/commits/${annotation.sha}">${annotation.sha.substr(0, 6)}</a> ${annotation.author}`
                }
              ).join('\n')
            }</pre></code>
          </div>
          <div class="col overflow-scroll p-0">
            <code>
              ${
                highlightCode(
                  await getFileContents(
                    data.fileInfo.repoName,
                    data.fileInfo.branchName,
                    data.fileInfo.file
                  ),
                  languageExtension(
                    data.fileInfo.file,
                    data.fileInfo.repoName
                  )
                )
              }
            </code>
          </div>
        </div>
      </div>
    </div>
    `}
    
    <script type="text/javascript">
      const toggleLastTouch = (event) => {
        const isOn = event.target.checked
        const annotations = document.getElementById("annotations")
        if (isOn) {
          annotations.classList.remove("d-none")
        } else {
          annotations.classList.add("d-none")
        }
      }
    
      document.getElementById("showLastTouch")?.addEventListener('click', toggleLastTouch)
    </script>
  `
}