import React from 'react'
import classNames from 'classnames'
import {
  AudioControlButton,
  AudioControlButtonProps,
  DefaultAudioControlMenu,
  getClassName,
  getMergedClassNames,
  RoomControls,
} from '../../../components'
import { FullScreenButtonProps, OneOnOneRoomControlsProps } from './models'
import zocksStyle from './OneOnOneRoomControls.module.scss'

export const OneOnOneRoomControls: React.FC<OneOnOneRoomControlsProps> = ({
  zocksActions,
  components,
  isInFullscreen,
  toggleFullscreen,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('oneone-room-controls__container', mergedStyles)}>
      <RoomControls
        styles={mergedStyles}
        mediaActions={zocksActions.localMediaActions}
        leaveAction={zocksActions.sessionActions.leave}
        components={{
          AudioControlButton: AudioButtonWithoutTranscription,
          ExtraComponent: () => (
            <FullScreenButton
              styles={mergedStyles}
              isInFullscreen={isInFullscreen}
              toggleFullscreen={toggleFullscreen}
            />
          ),
          ...components,
        }}
      />
    </div>
  )
}

const FullScreenButton: React.FC<FullScreenButtonProps> = ({ styles, isInFullscreen, toggleFullscreen }) => {
  return (
    <button
      id='oneonone-room-controls__full-screen-button'
      className={getClassName('oneonone-room-controls__full-screen-button', styles)}
      onClick={toggleFullscreen}
    >
      <div
        className={classNames({
          [getClassName('oneonone-room-controls__full-screen-button--on', styles)]: !isInFullscreen,
          [getClassName('oneonone-room-controls__full-screen-button--off', styles)]: isInFullscreen,
        })}
      />
      <label htmlFor='oneonone-room-controls__full-screen-button'>
        {isInFullscreen ? 'Exit Full Screen' : 'Full Screen'}
      </label>
    </button>
  )
}

const AudioButtonWithoutTranscription: React.FC<AudioControlButtonProps> = ({
  audioIsOn,
  toggleAudio,
  onAudioDeviceSelected,
  styles,
}) => (
  <AudioControlButton
    styles={styles}
    audioIsOn={audioIsOn}
    toggleAudio={toggleAudio}
    onAudioDeviceSelected={onAudioDeviceSelected}
    components={{ AudioControlMenu: DefaultAudioControlMenu }}
  />
)
