import m from 'mithril'
import { ReposConfigurationWithDefaultsApplied } from '../src/configTypes.ts'
import { type Repository } from '../src/dataTypes.ts'
import { NavHelper } from './helpers/nav.ts'
import htmlPage from './common/htmlPage.ts'
import { colorAndPercentMap } from '../src/languageGraph.ts'

export default async (
  reposConfig: ReposConfigurationWithDefaultsApplied,
  eleventyConfig: any,
  data: any
) => {
  const repo: Repository = data.currentRepo
  const ref: Repository['branches'][0] | Repository['tags'][0] = data.currentRef
  const renderContentIfAvailable = eleventyConfig.getFilter("renderContentIfAvailable")
  const slugify = eleventyConfig.getFilter("slugify")
  const getReadMe = eleventyConfig.getFilter("getReadMe")
  const latestCommit = repo.commits.get(ref.sha)
  const latestCommitMessage = latestCommit.message.length > 72
    ? latestCommit.message.split('\n')[0].substr(0, 72) + '...'
    : latestCommit.message

  const mostRecentCommitOverall = data.mostRecentCommitsOverall[repo.name]

  const nav = NavHelper({
    reposConfig,
    slugify,
    currentRepoName: repo.name,
    currentRefName: data.currentRef.name,
    currentRefType: data.flatRef.type,
  })

  const readmeContent = await renderContentIfAvailable(await getReadMe(repo.name, ref.name), ref.name)

  const languageColors = []
  const colorsAndPercentages = await colorAndPercentMap(reposConfig, ref, repo.files)
  for (const language in colorsAndPercentages) {
    languageColors.push({language, values: colorsAndPercentages[language]})
  }

  const pageContent = [
    m('div', {class: "row"}, [
      m('div', {class: "col"}, [
        m('div', {class: "px-4 pt-3 bezel-header"}, [
          m('div', {class: "row"}, [
            m('div', {class: "col-12 col-lg-6"}, [
              m('h1', {class: "display-3 text-white"},
                m('em', repo.name)
              ),
              repo.description
                ? m('p', {class: "text-white fs-4 fw-light"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-lg-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: 'row'}, [
                m('div', {class: "col-12 col-sm-6"}, [
                  m('div', {class: "row"}, [
                    m('div', {class: "col-6 col-lg-12 pb-0 pb-lg-2"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, [
                          m('span', {class: 'me-1'}, `Latest in ${ref.name}`),
                          m('a', {href: nav.rssFeed(), class: "fw-light p-0 btn badge shadow-none"}, [
                            m('img', {
                              class: 'mb-1 me-1',
                              src: `${nav.rootPath()}frontend/img/rss-icon.svg`,
                              style: "width: 11px;"
                            }),
                            'RSS',
                          ]),
                        ]),
                        m('div', {class: "font-monospace"}, [
                          `${latestCommit.date.toDateString().split(' ').slice(1).join(' ')} `,
                          m('a', {href: nav.commit(latestCommit.hash), class: "fw-bold link-info"}, latestCommit.hash.substr(0, 6))
                        ]),
                      ])
                    ]),
                    m('div', {class: "col-6 col-lg-12 pb-3 pb-lg-0"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "latest-commit fs-6 fw-light"}, 'Latest overall'),
                        m('div', {class: "font-monospace"}, [
                          `${mostRecentCommitOverall.commit.date.toDateString().split(' ').slice(1).join(' ')} `,
                          m('a', {
                            href: nav.commit(mostRecentCommitOverall.commit.hash),
                            class: "link-info fw-bold"
                          }, mostRecentCommitOverall.commit.hash.substr(0, 6))
                        ]),
                        m('span', {class: "fs-6 fw-light"}, [
                          'in branch ',
                          m('a', {
                            href: nav.commits(1, {
                              refName: mostRecentCommitOverall.branch.name,
                              refType: 'branch',
                            }),
                            class: "link-info"
                          }, mostRecentCommitOverall.branch.name),
                        ])
                      ])
                    ])
                  ])
                ]),
                m('div', {class: "col-12 col-sm-6 d-flex"}, [
                  m('div', {class: "d-flex flex-column"}, languageColors.map((languageInfo) => {
                    return m('div', {
                      class: 'language-name me-1 d-flex justify-content-end align-items-end small text-white font-monospace flex-grow-1'
                    }, languageInfo.language)
                  })),
                  m('div', {class: "flex-grow-1 d-flex flex-column"}, [
                    languageColors.map((languageInfo) => {
                      const values = languageInfo.values
                      return m('div', {
                        class: 'language-col flex-grow-1',
                        style: `width: ${values.percentOfTotal * 100}%; background-color: ${values.color};`
                      })
                    }),
                  ])
                ]),
              ]),
              m('div', {class: "row align-items-center"}, [
                m('div', {class: "col-12"}, [
                  m('div', { class: 'clone-text-group input-group flex-nowrap mt-3' }, [
                    m('label', { class: 'input-group-text' }, 'Clone URL'),
                    m('span', {class: 'clone overflow-scroll input-group-text flex-grow-1'}, repo.cloneUrl),
                    m('button', {
                      class: 'btn btn-info shadow-none copy-button',
                      ['data-copy-text']: repo.cloneUrl,
                    }, 'Copy' )
                  ]),
                  m('div', {class: "header-button-container"}, [
                    nav.homepageButtons.map((buttonConfig) => {
                      return m('a', {
                        class: "btn btn-secondary",
                        href: buttonConfig.url,
                        target: buttonConfig.newTab ? "_blank" : "_self"
                      }, m.trust(buttonConfig.text + `${buttonConfig.newTab ? ' <span>&#x29C9;</span>' : ''}`))
                    })
                  ])
                ])
              ])
            ])
          ]),
        ])
      ])
    ]),
    m('div', {class: "row my-4 mx-1"},
      m('div', {class: "col readme"}, m.trust(readmeContent))
    )
  ]

  return await htmlPage(reposConfig, eleventyConfig, data, pageContent)
}