import { render, screen } from '@testing-library/react'
import { DefaultVideoControlMenu, VirtualBackgroundVideoControlMenu } from './VideoControlMenu'
import userEvent from '@testing-library/user-event'
import { VirtualBackgroundType } from '@zocks-communications/client-sdk-js'

test('DefaultVideoControlMenu renders a video control menu with the available devices', () => {
  render(
    <DefaultVideoControlMenu
      menuItems={[
        { label: 'Test video device 1', value: 'testVideoDevice1Id', kind: 'videoinput' },
        { label: 'Test video device 2', value: 'testVideoDevice2Id', selected: true, kind: 'videoinput' },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Camera Settings')).toBeInTheDocument()
  expect(screen.getByText('Test video device 1')).toBeInTheDocument()
  expect(screen.getByText('Test video device 2')).toBeInTheDocument()
})

test('DefaultVideoControlMenu calls the onMenuItemClick callback when clicking on a video device menu item', () => {
  const mockMenuItemClick = jest.fn()
  render(
    <DefaultVideoControlMenu
      menuItems={[
        { label: 'Test video device 1', value: 'testVideoDevice1Id', kind: 'videoinput' },
        { label: 'Test video device 2', value: 'testVideoDevice2Id', selected: true, kind: 'videoinput' },
      ]}
      onMenuItemClick={mockMenuItemClick}
      hideMenu={jest.fn()}
    />
  )

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

  expect(mockMenuItemClick).toHaveBeenCalledTimes(1)
  expect(mockMenuItemClick).toHaveBeenCalledWith({
    label: 'Test video device 1',
    value: 'testVideoDevice1Id',
    kind: 'videoinput',
  })
})

test('VirtualBackgroundVideoControlMenu renders a video control menu with the available devices and a blur toggle', () => {
  const TestVideoControlMenu = VirtualBackgroundVideoControlMenu(
    [{ type: VirtualBackgroundType.BLUR }],
    null,
    jest.fn()
  )
  render(
    <TestVideoControlMenu
      menuItems={[
        { label: 'Test video device 1', value: 'testVideoDevice1Id', kind: 'videoinput' },
        { label: 'Test video device 2', value: 'testVideoDevice2Id', selected: true, kind: 'videoinput' },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Camera Settings')).toBeInTheDocument()
  expect(screen.getByText('Test video device 1')).toBeInTheDocument()
  expect(screen.getByText('Test video device 2')).toBeInTheDocument()
  expect(screen.getByText('Blur My Background')).toBeInTheDocument()
})

test('VirtualBackgroundVideoControlMenu renders the control menu with an unblur option when blur is turned on', () => {
  const TestVideoControlMenu = VirtualBackgroundVideoControlMenu(
    [{ type: VirtualBackgroundType.BLUR }],
    { type: VirtualBackgroundType.BLUR },
    jest.fn()
  )
  render(
    <TestVideoControlMenu
      menuItems={[
        { label: 'Test video device 1', value: 'testVideoDevice1Id', kind: 'videoinput' },
        { label: 'Test video device 2', value: 'testVideoDevice2Id', selected: true, kind: 'videoinput' },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  expect(screen.getByText('Camera Settings')).toBeInTheDocument()
  expect(screen.getByText('Test video device 1')).toBeInTheDocument()
  expect(screen.getByText('Test video device 2')).toBeInTheDocument()
  expect(screen.getByText('Unblur My Background')).toBeInTheDocument()
})

test('VirtualBackgroundVideoControlMenu calls the toggleBlur function when clicking the blur button', () => {
  const mockToggleBlur = jest.fn()
  const TestVideoControlMenu = VirtualBackgroundVideoControlMenu(
    [{ type: VirtualBackgroundType.BLUR }],
    null,
    mockToggleBlur
  )
  render(
    <TestVideoControlMenu
      menuItems={[
        { label: 'Test video device 1', value: 'testVideoDevice1Id', kind: 'videoinput' },
        { label: 'Test video device 2', value: 'testVideoDevice2Id', selected: true, kind: 'videoinput' },
      ]}
      onMenuItemClick={jest.fn()}
      hideMenu={jest.fn()}
    />
  )

  userEvent.click(screen.getByText('Blur My Background'))

  expect(mockToggleBlur).toHaveBeenCalledTimes(1)
})
