import React from 'react'
import {
  AudioControlButton,
  LeaveButton,
  RecordingButton,
  ScreenShareControlButton,
  TranscriptionAudioControlMenu,
  VideoControlButton,
  VirtualBackgroundVideoControlMenu,
} from '../ControlButtons'
import { getClassName, getMergedClassNames } from '../common'
import { useRoomControls, useTranscription, useVirtualBackgrounds } from './hooks'
import { RoomControlsProps } from './models'
import zocksStyle from './RoomControls.module.scss'
import { useZocksAuth } from '../../store'

export const RoomControls: React.FC<RoomControlsProps> = ({
  zocksActions,
  authActions,
  audioEnabledByDefault,
  videoEnabledByDefault,
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const {
    audioIsOn,
    videoIsOn,
    isScreenSharing,
    isLocalScreenShare,
    toggleAudio,
    toggleVideo,
    toggleScreenShare,
    selectAudioDevice,
    selectVideoDevice,
  } = useRoomControls(zocksActions.localMediaActions, audioEnabledByDefault, videoEnabledByDefault)
  const { transcriptionStatus, toggleTranscription } = useTranscription(audioIsOn, zocksActions.transcriptionActions)
  const { currentVirtualBackground, toggleVirtualBackground, availableBackgrounds } = useVirtualBackgrounds(
    zocksActions.localMediaActions
  )
  const zocksAuthActions = useZocksAuth()

  const AudioControlButtonElement = components?.AudioControlButton ?? AudioControlButton
  const VideoControlButtonElement = components?.VideoControlButton ?? VideoControlButton
  const ScreenShareControlButtonElement = components?.ScreenShareControlButton ?? ScreenShareControlButton
  const LeaveButtonElement = components?.LeaveButton ?? LeaveButton
  const RecordingButtonElement = components?.RecordingButton ?? RecordingButton
  const ExtraComponentElement = components?.ExtraComponent ?? null

  return (
    <div className={getClassName('room-controls', mergedStyles)}>
      <AudioControlButtonElement
        audioIsOn={audioIsOn}
        toggleAudio={toggleAudio}
        onAudioDeviceSelected={selectAudioDevice}
        styles={mergedStyles}
        components={{ AudioControlMenu: TranscriptionAudioControlMenu(transcriptionStatus, toggleTranscription) }}
      />
      <VideoControlButtonElement
        videoIsOn={videoIsOn}
        toggleVideo={toggleVideo}
        onVideoDeviceSelected={selectVideoDevice}
        styles={mergedStyles}
        components={{
          VideoControlMenu: VirtualBackgroundVideoControlMenu(
            availableBackgrounds,
            currentVirtualBackground,
            toggleVirtualBackground
          ),
        }}
      />
      <ScreenShareControlButtonElement
        isScreenSharing={isScreenSharing}
        isLocalScreenShare={isLocalScreenShare}
        toggleScreenShare={toggleScreenShare}
        styles={mergedStyles}
      />
      <RecordingButtonElement
        recordingActions={zocksActions.recordingActions}
        authActions={authActions ?? zocksAuthActions}
        styles={mergedStyles}
      />
      <LeaveButtonElement leaveAction={zocksActions.sessionActions.leave} styles={mergedStyles} />
      {ExtraComponentElement && <ExtraComponentElement styles={mergedStyles} />}
    </div>
  )
}
