import m from 'mithril'
import { type ReposConfigurationWithDefaultsApplied } from '../../src/configTypes.ts'
import { type Repository } from '../../src/dataTypes.ts'
import { NavHelper } from '../helpers/nav.ts'
import relDropDown from './relDropDown.ts'

export default async (
  reposConfig: ReposConfigurationWithDefaultsApplied,
  eleventyConfig: any,
  data: any,
  pageContent: any
) => {
  // this still necessary?
  if (data.currentRepo === '') {
    return
  }

  const repo: Repository = data.currentRepo
  const ref: Repository['branches'][0] = data.currentRef

  const slugify = eleventyConfig.getFilter("slugify")
  const nav = NavHelper({
    reposConfig,
    slugify,
    currentRepoName: repo.name,
    currentRefName: ref.name,
    currentRefType: data.currentRefType,
  })

  const refObject = (ref, refType: 'branch' | 'tag') => {
    return {
      name: ref.name,
      href: nav.refHome({refName: ref.name, refType}) + '/' + data.nav.path,
      date: repo.commits.get(ref.sha).date.toISOString(),
    }
  }

  const branchesWithHrefs = {
    branches: repo.branches.map(branch => refObject(branch, 'branch')),
    tags: repo.tags.map(tag => refObject(tag, 'tag')),
  }

  return {
    rootPath: nav.rootPath(),
    pageTitle: repo.name,
    additionalHeadContent: [
      m('script', m.trust(`
        window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
        window.defaultBranch = "${repo.defaultBranch}";
        window.currentRef = "${ref.name}";
        window.currentRefType = "${data.currentRefType}";
        window.cloneUrl = "${repo.cloneUrl}";
      `)),
// TODO: don't include prism.css if the user doesn't have the syntaxHighlight plugin
// also allow them to use a custom prism theme
      m('link', {
        rel: "stylesheet",
        id: "prism-theme",
        type: "text/css",
        href: `${data.reposPath}/vendor/prism.css`
      }),
    ],
    navbarContent: m('nav', {class: "navbar navbar-expand flex-wrap"}, [
      m('ul', {class: "navbar-nav flex-wrap"}, [
        m('li', {class: "nav-item"},
          m('a', {
            class: "nav-link",
            href: nav.rootPath()
          }, m.trust('❮ repos'))
        ),
        m('li', {class: "nav-item"},
          m('a', {
            class: "nav-link",
            href: nav.refHome()
          }, repo.name)
        ),
        m('li', {class: "nav-item me-4 mb-1"}, [
          m('span', {class: "nav-link d-inline-block"}, 'ref:'),
          relDropDown(ref.name, data.currentRefType, repo, branchesWithHrefs),
        ]),
        m('ul', {class: "main-nav navbar-nav flex-wrap"}, [
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'home' ? 'active' : ''}`, 'aria-current': "page", href: nav.refHome()}, 'Home')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'files' ? 'active' : ''}`, href: nav.files()}, 'Files')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'commits' ? 'active' : ''}`, href: nav.commits(1)}, 'Commits')
          ),
          m('li', {class: "nav-item"},
            m('a', {class: `nav-link ${data.navTab === 'branches' ? 'active' : ''}`, href: nav.branches()}, 'Branches')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'tags' ? 'active' : ''}`, href: nav.tags()}, 'Tags')
          )
        ])
      ]),
    ]),
    pageContent: [
      m('div', {class: "row"},
        m('div', {class: "col-12"},
          await pageContent
        )
      ),
    ]
  }
}