type Ref = { name: string, href: string, date: string }
type RefType = 'branch' | 'tag' | 'commit'

// These are the menu items that show up in the ref: dropdown menu.
const htmlForRef = (ref: Ref, refType: RefType, currentPageRef: string, currentPageRefType: RefType, defaultBranch: string) => {
  const currentBadge = currentPageRef === ref.name && currentPageRefType === refType
    ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>'
    : ''

  const defaultBadge = defaultBranch === ref.name && refType === 'branch'
    ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>'
    : ''

  return `
    <a href='${ref.href}' class='dropdown-item my-1'>
      <span class="branch-dropdown-branch-name me-1">
        ${ref.name}
      </span>${currentBadge}${defaultBadge}
      <span class="text-body d-block ms-2">
        updated ${new Date(ref.date).toDateString()}
      </span>
    </a>
  `
}

const sortFunction = (a, b, sortBy) => {
  let comparison = 0
  if (a[sortBy] < b[sortBy]) { comparison = -1 }
  if (a[sortBy] > b[sortBy]) { comparison = 1 }
  // we want reverse order if sorting by date (making newest first)
  if (sortBy === 'date') { comparison = comparison * -1 }

  return comparison
}
// This is the full html for the contents of the ref: dropdown menu.
export const branchesAndTagsResults = (
  refs: {
    branches: Array<Ref>,
    tags: Array<Ref>,
  },
  defaultBranch: string,
  currentRef: string,
  currentRefType: RefType,
  sortBy: 'name' | 'date',
): string => {
  const branchItemsHtml = refs.branches.sort((a, b) => sortFunction(a, b, sortBy))
    .map(branch => htmlForRef(branch, 'branch', currentRef, currentRefType, defaultBranch))
    .join('')

  const tagItemsHtml = refs.tags.sort((a, b) => sortFunction(a, b, sortBy))
    .map(tag => htmlForRef(tag, 'tag', currentRef, currentRefType, defaultBranch))
    .join('')
  
  return `<div class="branch">${branchItemsHtml}</div><div class="tag">${tagItemsHtml}</div>`
}


// Note: this function returns a plain string of HTML, instead of using mithril, because
// it is called directly by both the backend *and* the frontend, and the frontend does not
// include mithril. Ideally, the frontend should not need mithril; there are very few
// dynamic pieces on the frontend.
export default (
  refs: {
    branches: Array<Ref>,
    tags: Array<Ref>,
  },
  defaultBranch: string,
  currentRef: string,
  currentRefType: RefType,
  sortBy: 'name' | 'date',
): string => {
  return `<div class="rel-dropdown" data-selected="${currentRefType}">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link ${currentRefType === 'branch' ? 'active' : ''}" data-select="branch" href="#">Branches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link ${currentRefType === 'tag' ? 'active' : ''}" data-select="tag" href="#">Tags</a>
      </li>
    </ul>
    <div id="branches-and-tags-list">
      ${branchesAndTagsResults(refs, defaultBranch, currentRef, currentRefType, sortBy)}
    </div>
  </div>`
}