import React from 'react'
import classNames from 'classnames'
import { ScreenShareControlButtonProps } from './models'
import { getClassName, getMergedClassNames } from '../../common'
import zocksStyle from './ScreenShareControlButton.module.scss'

export const ScreenShareControlButton: React.FC<ScreenShareControlButtonProps> = ({
  isScreenSharing,
  isLocalScreenShare,
  toggleScreenShare,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <button
      disabled={isScreenSharing && !isLocalScreenShare}
      id='zocks__screen-share-button'
      className={`${getClassName('control-button', mergedStyles)}
      ${getClassName('screen-share-button', mergedStyles)}`}
      onClick={toggleScreenShare}
    >
      <div
        className={classNames({
          [getClassName('screen-share-button--share-on', mergedStyles)]: !isScreenSharing || !isLocalScreenShare,
          [getClassName('screen-share-button--share-off', mergedStyles)]: isScreenSharing && isLocalScreenShare,
        })}
      />
      <label htmlFor='zocks__screen-share-button'>{isLocalScreenShare ? 'Stop Sharing' : 'Share Screen'}</label>
    </button>
  )
}
