import m from 'mithril'
import { type ReposConfiguration } 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: ReposConfiguration, 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 branchesWithHrefs = {
    branches: repo.branches.map((branch) => {
      return {
        name: branch.name,
        href: nav.refHome({refName: branch.name, refType: 'branch'}) + '/' + data.nav.path,
        date: repo.commits.get(branch.sha).date.toISOString(),
      }
    }),
    tags: (repo.tags.map((tag) => {
      return {
        name: tag.name,
        href: nav.refHome({refName: tag.name, refType: 'tag'}) + '/' + data.nav.path,
        date: repo.commits.get(tag.sha).date.toISOString(),
      }
    }))
  }

  return {
    rootPath: nav.rootPath(),
    pageTitle: repo.name,
    additionalHeadContent: [
      m('script', m.trust(`
        window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
        window.defaultBranch = "${repo.defaultBranch}";
        window.currentBranch = "${ref.name}";
        window.cloneUrl = "${repo.cloneUrl}";
      `)),
      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, 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()}, '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
        )
      ),
    ]
  }
}