import React from 'react'
import { ariaSelected } from '../../utils'
import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
import SubNavDropdown from './SubNavDropdown'

interface SubNavWithDropdownProps {
  item: TNavMenuItem
  selected: string
}

const SubNavWithDropdown: React.FC<SubNavWithDropdownProps> = ({ item, selected }) => {
  const dropdownItems = item.subnavDropdownOptions || []
  const labelSlug = item.label?.toLowerCase().replace(/\s+/g, '-')
  const buttonId = `subnav-dropdown-button-${labelSlug}`
  const modalId = `subnav-dropdown-modal-${labelSlug}`

  return (
    <div data-o-header-subnav-dropdown-parent>
      <button
        id={buttonId}
        type="button"
        className={`o-header__subnav-link ${selected}`}
        {...ariaSelected(item)}
        data-trackable={item.label}
        aria-controls={modalId}
        aria-haspopup="dialog"
        aria-expanded="false"
        data-o-header-subnav-dropdown-button
      >
        {item.label}
      </button>
      <SubNavDropdown id={modalId} ariaLabelledBy={buttonId} items={dropdownItems} title={item.label} />
    </div>
  )
}

export default SubNavWithDropdown