import React from 'react'
import {
  AudioControlButton,
  LeaveButton,
  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'

export const RoomControls: React.FC<RoomControlsProps> = ({
  mediaActions,
  transcriptionActions,
  leaveAction,
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const {
    audioIsOn,
    videoIsOn,
    isScreenSharing,
    isLocalScreenShare,
    toggleAudio,
    toggleVideo,
    toggleScreenShare,
    selectAudioDevice,
    selectVideoDevice,
  } = useRoomControls(mediaActions)
  const { displayTranscriptions, toggleDisplayTranscription } = useTranscription(audioIsOn, transcriptionActions)
  const { currentVirtualBackground, toggleBlur } = useVirtualBackgrounds(mediaActions)

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

  return (
    <div className={getClassName('room-controls', mergedStyles)}>
      <AudioControlButtonElement
        audioIsOn={audioIsOn}
        toggleAudio={toggleAudio}
        onAudioDeviceSelected={selectAudioDevice}
        styles={mergedStyles}
        components={{
          AudioControlMenu: TranscriptionAudioControlMenu(displayTranscriptions, toggleDisplayTranscription),
        }}
      />
      <VideoControlButtonElement
        videoIsOn={videoIsOn}
        toggleVideo={toggleVideo}
        onVideoDeviceSelected={selectVideoDevice}
        styles={mergedStyles}
        components={{ VideoControlMenu: VirtualBackgroundVideoControlMenu(currentVirtualBackground, toggleBlur) }}
      />
      <ScreenShareControlButtonElement
        isScreenSharing={isScreenSharing}
        isLocalScreenShare={isLocalScreenShare}
        toggleScreenShare={toggleScreenShare}
        styles={mergedStyles}
      />
      <LeaveButtonElement leaveAction={leaveAction} styles={mergedStyles} />
      {ExtraComponentElement && <ExtraComponentElement styles={mergedStyles} />}
    </div>
  )
}
