/**
 * @jest-environment jsdom
 */
import React from 'react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import { SubNavigation } from '../../components/sub-navigation/partials'
import fixture from '../fixtures/index'

describe('SubNavigation with dropdown options', () => {
  const mockProps = {
    ...fixture,
    userIsLoggedIn: false,
    userIsAnonymous: true,
    showMegaNav: false,
    variant: 'simple' as const,
    data: {
      ...fixture.data,
      subsections: [
        {
          label: 'Markets Data',
          url: '/markets-data',
          isSubnavDropdownEnabled: true,
          subnavDropdownOptions: [
            { label: 'Equities', url: '/equities', trackable: 'equities' },
            { label: 'Currencies', url: '/currencies', trackable: 'currencies' }
          ]
        },
        {
          label: 'Markets Overview',
          url: '/markets-overview'
        }
      ]
    }
  }

  it('renders hidden dropdown modal with provided options', () => {
    const { container } = render(<SubNavigation {...mockProps} />)

    const button = container.querySelector('[data-o-header-subnav-dropdown-button]')
    expect(button).toBeInTheDocument()
    expect(button).toHaveAttribute('data-trackable', 'Markets Data')
    expect(button).toHaveAttribute('id', 'subnav-dropdown-button-markets-data')
    expect(button).toHaveAttribute('aria-controls', 'subnav-dropdown-modal-markets-data')
    expect(button).toHaveAttribute('aria-haspopup', 'dialog')
    expect(button).toHaveAttribute('aria-expanded', 'false')

    const dropdown = container.querySelector('[data-o-header-subnav-dropdown-modal]')
    expect(dropdown).toBeInTheDocument()
    expect(dropdown).toHaveAttribute('id', 'subnav-dropdown-modal-markets-data')
    expect(dropdown).toHaveAttribute('role', 'dialog')
    expect(dropdown).toHaveAttribute('aria-modal', 'true')
    expect(dropdown).toHaveAttribute('aria-labelledby', 'subnav-dropdown-button-markets-data')
    expect(dropdown).not.toHaveAttribute('aria-label')

    const title = container.querySelector('.o-header__subnav-dropdown-title')
    expect(title).toBeInTheDocument()
    expect(title).toHaveTextContent('Markets Data')

    const closeButton = container.querySelector('[data-o-header-subnav-dropdown-close]')
    expect(closeButton).toBeInTheDocument()
    expect(closeButton).toHaveAttribute('aria-label', 'Close menu')
    const closeIcon = container.querySelector('.o-header__subnav-dropdown-close-icon')
    expect(closeIcon).toBeInTheDocument()

    const dropdownLinks = container.querySelectorAll('.o-header__subnav-dropdown-link')
    expect(dropdownLinks).toHaveLength(2)
    expect(dropdownLinks[0]).toHaveAttribute('href', '/equities')
    expect(dropdownLinks[0]).toHaveAttribute('data-trackable', 'equities')
    expect(dropdownLinks[1]).toHaveAttribute('href', '/currencies')
    expect(dropdownLinks[1]).toHaveAttribute('data-trackable', 'currencies')
  })

  it('renders subnav items as regular links when options are not available', () => {
    const propsWithoutDropdowns = {
      ...mockProps,
      data: {
        ...mockProps.data,
        subsections: [
          {
            label: 'Markets Overview',
            url: '/markets-overview',
            isSubnavDropdownEnabled: true
          },
          {
            label: 'Analysis',
            url: '/analysis'
          }
        ],
        'subsections-right': []
      }
    }

    const { container, getAllByRole } = render(<SubNavigation {...propsWithoutDropdowns} />)

    const links = getAllByRole('link')
    const overviewLink = links.find((link) => link.textContent === 'Markets Overview')
    expect(overviewLink).toBeInTheDocument()
    expect(overviewLink).toHaveAttribute('href', '/markets-overview')

    const dropdown = container.querySelector('[data-o-header-subnav-dropdown-modal]')
    const button = container.querySelector('[data-o-header-subnav-dropdown-button]')
    expect(dropdown).not.toBeInTheDocument()
    expect(button).not.toBeInTheDocument()
  })

  it('renders subnav items as regular links when isSubnavDropdownEnabled = false', () => {
    const propsWithDropdownsDisabled = {
      ...mockProps,
      data: {
        ...mockProps.data,
        subsections: [
          {
            label: 'Markets Data',
            url: '/markets-data',
            isSubnavDropdownEnabled: false,
            subnavDropdownOptions: [
              { label: 'Equities', url: '/equities', trackable: 'equities' },
              { label: 'Currencies', url: '/currencies', trackable: 'currencies' }
            ]
          },
          {
            label: 'Markets Overview',
            url: '/markets-overview'
          }
        ]
      }
    }

    const { container, getAllByRole } = render(<SubNavigation {...propsWithDropdownsDisabled} />)

    const links = getAllByRole('link')
    const overviewLink = links.find((link) => link.textContent === 'Markets Overview')
    expect(overviewLink).toBeInTheDocument()
    expect(overviewLink).toHaveAttribute('href', '/markets-overview')

    const dropdown = container.querySelector('[data-o-header-subnav-dropdown-modal]')
    const button = container.querySelector('[data-o-header-subnav-dropdown-button]')
    expect(dropdown).not.toBeInTheDocument()
    expect(button).not.toBeInTheDocument()
  })
})