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

test('renders a select button with the available virtual backgrounds', () => {
  render(
    <VirtualBackgroundSelector
      availableVirtualBackgrounds={[{ type: VirtualBackgroundType.BLUR }]}
      selectVirtualBackground={jest.fn()}
      currentVirtualBackground={null}
      virtualBackgroundIsLoading={false}
    />
  )

  const backgroundButton = screen.getByRole('button', { name: 'Background' })
  expect(backgroundButton).toBeInTheDocument()
  userEvent.click(backgroundButton)
  expect(screen.getByText('blur')).toBeInTheDocument()
  expect(screen.getByText('None')).toBeInTheDocument()
})
test('the select button is disabled when the virtual background is loading', () => {
  render(
    <VirtualBackgroundSelector
      availableVirtualBackgrounds={[{ type: VirtualBackgroundType.BLUR }]}
      selectVirtualBackground={jest.fn()}
      currentVirtualBackground={null}
      virtualBackgroundIsLoading={true}
    />
  )

  expect(screen.getByRole('button', { name: 'Background' })).toBeDisabled()
})

test('calls the selectVirtualBackground callback with the selected background when selecting a virtual background', () => {
  const mockSelectVirtualBackground = jest.fn()
  render(
    <VirtualBackgroundSelector
      availableVirtualBackgrounds={[{ type: VirtualBackgroundType.BLUR }]}
      selectVirtualBackground={mockSelectVirtualBackground}
      currentVirtualBackground={null}
      virtualBackgroundIsLoading={false}
    />
  )

  userEvent.click(screen.getByRole('button', { name: 'Background' }))
  userEvent.click(screen.getByText('blur'))

  expect(mockSelectVirtualBackground).toHaveBeenCalledTimes(1)
  expect(mockSelectVirtualBackground).toHaveBeenCalledWith({ type: VirtualBackgroundType.BLUR, url: undefined })
})

test('calls the selectVirtualBackground callback with null when clearing virtual background', () => {
  const mockSelectVirtualBackground = jest.fn()
  render(
    <VirtualBackgroundSelector
      availableVirtualBackgrounds={[{ type: VirtualBackgroundType.BLUR }]}
      selectVirtualBackground={mockSelectVirtualBackground}
      currentVirtualBackground={{ type: VirtualBackgroundType.BLUR }}
      virtualBackgroundIsLoading={false}
    />
  )

  userEvent.click(screen.getByRole('button', { name: 'Background' }))
  userEvent.click(screen.getByText('None'))

  expect(mockSelectVirtualBackground).toHaveBeenCalledTimes(1)
  expect(mockSelectVirtualBackground).toHaveBeenCalledWith(null)
})
