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

type RefType = Repository['branches'][0]

export default (ref: RefType, refType: "branch" | "tag", 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",
      'data-bs-toggle': "dropdown",
      'data-bs-auto-close': "outside",
      'aria-expanded': "false"
    }, ref.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 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, ref.name, refType, 'date'))
      )
    ])
  ])
}