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 toggle', () => {
  const TestAudioControlMenu = TranscriptionAudioControlMenu(false, 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('Enable Transcription')).toBeInTheDocument()
})

test('TranscriptionAudioControlMenu renders the control menu with a disable option when transcription is turned on', () => {
  const TestAudioControlMenu = TranscriptionAudioControlMenu(true, 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('Disable Transcription')).toBeInTheDocument()
})

test('TranscriptionAudioControlMenu calls the toggleBlur function when clicking the blur button', () => {
  const mockToggleTranscription = jest.fn()
  const TestAudioControlMenu = TranscriptionAudioControlMenu(false, mockToggleTranscription)
  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('Enable Transcription'))

  expect(mockToggleTranscription).toHaveBeenCalledTimes(1)
})
