export default (
  branches: Array<{name: string, href: string, date: string}>,
  defaultBranch: string,
  currentBranch: string,
  sortBy: 'name' | 'date',
): string => {
  return branches.toSorted((a, b) => {
    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
  }).map((branch) => {
    const currentBadge = currentBranch === branch.name
      ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>'
      : ''

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

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