import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { DefaultAudioControlMenu, TranscriptionAudioControlMenu } from './AudioControlMenu'

test('DefaultAudioControlMenu renders an audio control menu with the available devices', () => {
  render(
    <DefaultAudioControlMenu
      menuItems={[
        { label: 'Test audio device 1', value: 'testAudioDevice1Id' },
        { label: 'Test audio device 2', value: 'testAudioDevice2Id', selected: true },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Microphone Settings')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 1')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 2')).toBeInTheDocument()
})

test('DefaultAudioControlMenu calls the onMenuItemClick callback when clicking on an audio device menu item', () => {
  const mockMenuItemClick = jest.fn()
  render(
    <DefaultAudioControlMenu
      menuItems={[
        { label: 'Test audio device 1', value: 'testAudioDevice1Id' },
        { label: 'Test audio device 2', value: 'testAudioDevice2Id', selected: true },
      ]}
      onMenuItemClick={mockMenuItemClick}
      hideMenu={jest.fn()}
    />
  )

  userEvent.click(screen.getByText('Test audio device 1'))

  expect(mockMenuItemClick).toHaveBeenCalledTimes(1)
  expect(mockMenuItemClick).toHaveBeenCalledWith({
    label: 'Test audio device 1',
    value: 'testAudioDevice1Id',
  })
})

test('TranscriptionAudioControlMenu renders an audio control menu with the available devices and a transcription display toggle', () => {
  const displayTranscriptions = false
  const TestAudioControlMenu = TranscriptionAudioControlMenu(displayTranscriptions, jest.fn())
  render(
    <TestAudioControlMenu
      menuItems={[
        { label: 'Test audio device 1', value: 'testAudioDevice1Id' },
        { label: 'Test audio device 2', value: 'testAudioDevice2Id', selected: true },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Microphone Settings')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 1')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 2')).toBeInTheDocument()
  expect(screen.getByText('Show Transcriptions')).toBeInTheDocument()
})

test('TranscriptionAudioControlMenu renders the control menu with a hide option when the transcription is displayed', () => {
  const displayTranscriptions = true
  const TestAudioControlMenu = TranscriptionAudioControlMenu(displayTranscriptions, jest.fn())
  render(
    <TestAudioControlMenu
      menuItems={[
        { label: 'Test audio device 1', value: 'testAudioDevice1Id' },
        { label: 'Test audio device 2', value: 'testAudioDevice2Id', selected: true },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Microphone Settings')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 1')).toBeInTheDocument()
  expect(screen.getByText('Test audio device 2')).toBeInTheDocument()
  expect(screen.getByText('Hide Transcriptions')).toBeInTheDocument()
})

test('TranscriptionAudioControlMenu calls the toggleDisplayTranscriptionTranscription function when clicking the transcription button', () => {
  const mockToggleDisplayTranscription = jest.fn()
  const displayTranscriptions = false
  const TestAudioControlMenu = TranscriptionAudioControlMenu(displayTranscriptions, mockToggleDisplayTranscription)
  render(
    <TestAudioControlMenu
      menuItems={[
        { label: 'Test audio device 1', value: 'testAudioDevice1Id' },
        { label: 'Test audio device 2', value: 'testAudioDevice2Id', selected: true },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  userEvent.click(screen.getByText('Show Transcriptions'))

  expect(mockToggleDisplayTranscription).toHaveBeenCalledTimes(1)
})
