import m from 'mithril'
import { type Repository } from '../../src/dataTypes.ts'
import branchesListItems from './branchesListItems.ts'

export default (refName: string, refType: "branch" | "tag" | "commit", repo: Repository, branchesWithHrefs) => {
  return m('div', {class: "branch-selector dropdown-center d-inline-block"}, [
    m('button', {
      class: `branches nav-link d-inline-block btn btn-bg dropdown-toggle ${refType === 'commit' ? 'current-ref-commit' : ''}`,
      'data-bs-toggle': "dropdown",
      'data-bs-auto-close': "outside",
      'aria-expanded': "false"
    }, refName),
    m('div', {class: "dropdown-menu"}, [
      (refType === 'commit'
        ? [
          m('div', {class: 'container'}, m.trust(`ℹ️ You are currently on a specific commit. Navigation links from this page will take you back to the default branch.`)),
          m('div', {class: 'dropdown-divider'}),
        ]
        : null
      ),
      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 me-1", 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 me-1", 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"},
        m.trust(branchesListItems(branchesWithHrefs, repo.defaultBranch, refName, refType, 'date'))
      )
    ])
  ])
}