import { DropdownMenu } from '@/shared/components/dropdown/dropdown-menu'
import { RailTabKey } from '@/features/ide-react/context/rail-context'
import { RailElement } from '@/features/ide-react/util/rail-types'
import RailTab from './rail-tab'
import { shouldIncludeElement } from '@/features/ide-react/util/rail-utils'

export default function RailOverflowDropdown({
  tabs,
  isOpen,
  selectedTab,
}: {
  tabs: RailElement[]
  isOpen: boolean
  selectedTab: RailTabKey
}) {
  return (
    <DropdownMenu className="ide-rail-overflow-dropdown">
      {tabs
        .filter(shouldIncludeElement)
        .map(({ icon, key, indicator, title, disabled }) => (
          <RailTab
            open={isOpen && selectedTab === key}
            key={key}
            eventKey={key}
            icon={icon}
            indicator={indicator}
            title={title}
            disabled={disabled}
          />
        ))}
    </DropdownMenu>
  )
}