import React from 'react'
import { RecordingButtonProps } from './models'
import { getClassName, getClassNames, getMergedClassNames } from '../../common'
import zocksStyle from './RecordingButton.module.scss'
import { useZocksSession, useZocksAuth } from '../../../store'
import classNames from 'classnames'

export const RecordingButton: React.FC<RecordingButtonProps> = ({ recordingActions, authActions, styles }) => {
  const { roomId, recording } = useZocksSession()
  const zocksAuth = useZocksAuth()
  const { hasScope } = authActions ?? zocksAuth
  const { startRecording, stopRecording } = recordingActions
  const recordingAction = recording ? stopRecording : startRecording
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  const userHasRecordingScope = hasScope(
    `room:${roomId}` || '**',
    recording ? 'room_record:stop' : 'room_record:start',
    ['room_record:admin']
  )
  const disabled = !userHasRecordingScope
  return (
    <button
      className={classNames(getClassNames(['recording-button'], mergedStyles), {
        [getClassName('recording-button--stop', mergedStyles)]: recording,
        [getClassName('recording-button--start', mergedStyles)]: !recording,
      })}
      disabled={disabled}
      onClick={recordingAction}
      id='zocks__recording-button'
    >
      <label htmlFor='zocks__recording-button'>{recording ? 'Stop recording' : 'Start recording'}</label>
    </button>
  )
}
