import { type ReposConfiguration } from '../src/configTypes.ts'
import { type Repository } from '../src/dataTypes.ts'

export default async (eleventyConfig: any, data: any) => {
  const repo: Repository = data.currentRepo
  const branch: Repository['branches'][0] = data.currentBranch
  const renderContentIfAvailable = eleventyConfig.getFilter("renderContentIfAvailable")
  const getReadMe = eleventyConfig.getFilter("getReadMe")
  return `
    <div class="row">
      <div class="col">
        <div class="px-4 pt-3 bezel">
          <div class="row">
            <div class="col-12 col-xl-6">
              <h1 class="display-2 text-white"><em>${repo.name}</em></h1>
              ${repo.description ? '<p class="text-white fs-5">' + repo.description + '</p>' : ''}
            </div>
            <div class="col-12 col-xl-6 d-flex flex-column">
              <div class="row py-3 flex-grow-1 align-items-center">
                <div class="col-12">
                  <div class="row">
                    <div class="col-12 language-percentages">
                      <span style="width: 25%;" class="language-name text-light font-monospace">HTML</span>
                      <span style="width: 15%;" class="language-name text-light font-monospace">CSS</span>
                      <span style="width: 10%;" class="language-name text-light font-monospace">Rust</span>
                      <span style="width: 33%;" class="language-name text-light font-monospace">Typescript</span>
                      <span style="width: 17%;" class="language-name text-light font-monospace">Bash</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12 language-percentages">
                      <div style="background: #E273FA; width: 25%;" class="language-percent"></div>
                      <div style="background: #852CDF; width: 15%;" class="language-percent"></div>
                      <div style="background: #E273FA; width: 10%;" class="language-percent"></div>
                      <div style="background: #852CDF; width: 33%;" class="language-percent"></div>
                      <div style="background: #E273FA; width: 17%;" class="language-percent"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row flex-grow-1 align-items-center">
                <div class="col-md col-fluid py-3">
                  <button class="w-100 btn btn-info btn-lg dropdown-toggle" id="clone-popover-btn">Clone</button>
                </div>
                <div class="col-md col-fluid py-3">
                  <button class="w-100 btn btn-outline-info shadow-none btn-lg">Setup Instructions</button>
                </div>
              </div>
            </div>
          </div>
          <noscript>
            <div class="row mt-2">
              <div class="col">
                <p class="font-monospace text-white">
                  Clone URL: ${repo.cloneUrl}
                </p>
              </div>
            </div>
          </noscript>
          <div class="row mt-2">
            <div class="col">
              <p class="font-monospace text-white">
                Latest commit: ${repo.commits.get(branch.head).hash.substr(0, 6)} ${repo.commits.get(branch.head).date.toDateString()} - ${repo.commits.get(branch.head).message}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row my-4 mx-1">
      <div class="col">
        ${await renderContentIfAvailable(await getReadMe(repo.name, branch.name), "md")}
      </div>
    </div>
  `
}