import { render, screen } from '@testing-library/react'
import { setupZocksSdkMocks } from '../../../testUtils'
import { ParticipantAudio } from './ParticipantAudio'
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import { zocksStoreConfig } from '../../../app/store'
import {
  addRemoteParticipant,
  participantTrackPublished,
  setRoomId,
  setSessionState,
} from '../../../store/session/sessionSlice'
import { SessionState } from '@zocks-communications/client-sdk-js'

test('renders audio tags for speaking remote participants', () => {
  const { mockSession, mockRemoteAudioTrack, mockRemoteParticipant } = setupZocksSdkMocks()

  const store = configureStore(zocksStoreConfig)
  store.dispatch(setSessionState(SessionState.CONNECTED))
  store.dispatch(setRoomId(mockSession.room.id!))
  store.dispatch(
    addRemoteParticipant({ participantId: mockRemoteParticipant.id, participantName: mockRemoteParticipant.name })
  )
  store.dispatch(
    participantTrackPublished({
      participantId: mockRemoteParticipant.id,
      trackId: mockRemoteAudioTrack.id,
      trackKind: mockRemoteAudioTrack.kind,
      trackSource: mockRemoteAudioTrack.source,
      trackIsMuted: mockRemoteAudioTrack.isMuted,
      trackIsSubscribed: mockRemoteAudioTrack.isSubscribed,
    })
  )
  render(
    <Provider store={store}>
      <ParticipantAudio />
    </Provider>
  )

  expect(screen.getByTestId('audioElement')).toBeInTheDocument()
  expect(mockRemoteAudioTrack.attach).toHaveBeenCalledTimes(1)
})
