import React from 'react'
import classNames from 'classnames'
import { DeviceSelectButton } from '../../DeviceSelectButton'
import { getClassName, getMergedClassNames } from '../../common'
import { VideoControlButtonProps } from './models'
import zocksStyle from './VideoControlButton.module.scss'
import { DefaultVideoControlMenu } from './VideoControlMenu'

export const VideoControlButton: React.FC<VideoControlButtonProps> = ({
  videoIsOn,
  toggleVideo,
  onVideoDeviceSelected,
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  const VideoControlMenuElement = components?.VideoControlMenu || DefaultVideoControlMenu

  return (
    <div className={getClassName('video-button-container', mergedStyles)}>
      <button id='zocks__video-button' className={getClassName('control-button', mergedStyles)} onClick={toggleVideo}>
        <div
          className={classNames({
            [getClassName('video-button--unmuted', mergedStyles)]: videoIsOn,
            [getClassName('video-button--muted', mergedStyles)]: !videoIsOn,
          })}
        />
        <label htmlFor='zocks__video-button'>{videoIsOn ? 'Disable Video' : 'Enable Video'}</label>
      </button>
      {onVideoDeviceSelected && (
        <DeviceSelectButton
          disabled={!videoIsOn}
          deviceKind={'videoinput'}
          styles={mergedStyles}
          onDeviceSelected={onVideoDeviceSelected}
          label={'Video devices'}
          components={{ SelectMenu: VideoControlMenuElement }}
        />
      )}
    </div>
  )
}
