import React from 'react'
import classNames from 'classnames'
import { DeviceSelectButton } from '../../DeviceSelectButton'
import { getClassName, getMergedClassNames } from '../../common'
import { AudioControlButtonProps } from './models'
import { DefaultAudioControlMenu } from './AudioControlMenu'
import zocksStyle from './AudioControlButton.module.scss'

export const AudioControlButton: React.FC<AudioControlButtonProps> = ({
  audioIsOn,
  toggleAudio,
  onAudioDeviceSelected,
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const AudioControlMenuElement = components?.AudioControlMenu || DefaultAudioControlMenu

  return (
    <div className={getClassName('audio-button-container', mergedStyles)}>
      <button id='zocks__audio-button' className={getClassName('control-button', mergedStyles)} onClick={toggleAudio}>
        <div
          className={classNames({
            [getClassName('audio-button--unmuted', mergedStyles)]: audioIsOn,
            [getClassName('audio-button--muted', mergedStyles)]: !audioIsOn,
          })}
        />
        <label htmlFor='zocks__audio-button'>{audioIsOn ? 'Mute' : 'Unmute'}</label>
      </button>
      {onAudioDeviceSelected && (
        <DeviceSelectButton
          disabled={!audioIsOn}
          styles={mergedStyles}
          deviceKind={'audioinput'}
          onDeviceSelected={onAudioDeviceSelected}
          label={'Audio devices'}
          components={{ SelectMenu: AudioControlMenuElement }}
        />
      )}
    </div>
  )
}
