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 branchesListItems from './branchesListItems.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 branch: Repository['branches'][0] = data.currentBranch

  const slugify = eleventyConfig.getFilter("slugify")
  const nav = NavHelper(reposConfig, slugify, repo.name, branch.name)

  const branchesWithHrefs = repo.branches.map((branch) => {
    return {
      name: branch.name,
      href: nav.repoBranchHome(branch.name) + '/' + data.nav.path,
      date: repo.commits.get(branch.head).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 = "${branch.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"}, [
      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.repoCurrentBranchHome()
          }, repo.name)
        ),
        m('li', {class: "nav-item"}, [
          m('span', {class: "nav-link d-inline-block"}, 'Branch:'),
          m('div', {class: "branch-selector dropdown-center d-inline-block"}, [
            m('button', {
              class: "branches nav-link d-inline-block btn btn-bg dropdown-toggle",
              'data-bs-toggle': "dropdown",
              'data-bs-auto-close': "outside",
              'aria-expanded': "false"
            }, branch.name),
            m('div', {class: "dropdown-menu"}, [
              m('form', {class: "mx-3 my-1"}, [
                m('input', {type: "text", class: "form-control", id: "dropdownBranchSearch", placeholder: "Search branches..."}),
                m('div', [
                  m('div', {class: "row mt-3"},
                    m('div', {class: "col"},
                      m('label', {class: "form-label"}, 'Sort by:')
                    )
                  ),
                  m('div', {class: "sortRadioButtons"}, [
                    m('div', {class: "sortRadioButton pe-1"}, [
                      m('input', {class: "form-check-input sort-filter", type: "radio", name: "branchSort", value: 'date', id: "branchSortByDate", checked: true}),
                      m('label', {class: "form-check-label", for: "branchSortByDate"}, 'Last commit')
                    ]),
                    m('div', {class: "sortRadioButton ps-1"}, [
                      m('input', {class: "form-check-input sort-filter", type: "radio", name: "branchSort", value: 'name', id: "branchSortByName"}),
                      m('label', {class: "form-check-label", for: "branchSortByName"}, 'Name')
                    ])
                  ])
                ])
              ]),
              m('div', {class: "dropdown-divider"}),
              m('div', {id: "dropdown-branches-results", class: "dropdown-branches"},
                branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name, 'date')
              )
            ])
          ])
        ])
      ])
    ]),
    pageContent: [
      m('div', {class: "row"},
        m('div', {class: "col"},
          m('nav', {class: "navbar navbar-expand"},
            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.repoCurrentBranchHome()}, 'Home')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'files' ? 'active' : ''}`, href: nav.repoCurrentBranchFiles()}, 'Files')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'commits' ? 'active' : ''}`, href: nav.repoCurrentBranchCommits()}, 'Commits')
              ),
              m('li', {class: "nav-item"},
                m('a', {class: `nav-link ${data.navTab === 'branches' ? 'active' : ''}`, href: nav.repoCurrentBranchBranches()}, 'Branches')
              )
            ])
          )
        )
      ),
      m('div', {class: "row"},
        m('div', {class: "col-12"},
          await pageContent
        )
      ),
    ]
  }
}