import React, { useEffect, useState } from 'react'
import classNames from 'classnames'
import { useParticipant } from '../../store'
import { Audio, Video } from '../Media'
import { getClassName, getMergedClassNames } from '../common'
import { ParticipantProps } from './model'
import zocksStyle from './Participant.module.scss'

const SPEAKING_INDICATOR_TURN_OFF_DELAY = 1500

export const Participant: React.FC<ParticipantProps> = ({ participant, withAudio = false, components, styles }) => {
  const {
    id,
    name,
    tracks: { primaryVideoTrack, primaryAudioTrack },
    isLocal,
    connectionQuality,
    isSpeaking,
    isScreenSharing,
  } = useParticipant(participant)

  const [showSpeaking, setShowSpeaking] = useState(isSpeaking)

  useEffect(() => {
    if (!isSpeaking) {
      const timeout = setTimeout(() => {
        setShowSpeaking(isSpeaking)
      }, SPEAKING_INDICATOR_TURN_OFF_DELAY)
      return () => clearTimeout(timeout)
    } else {
      setShowSpeaking(true)
    }
  }, [isSpeaking])

  const videoIsMuted = !primaryVideoTrack || !primaryVideoTrack.isSubscribed || primaryVideoTrack.isMuted
  const audioIsMuted = !primaryAudioTrack || !primaryAudioTrack.isSubscribed || primaryAudioTrack.isMuted

  const ExtensionElement = components?.Extension || null

  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <div
      id={`participant_${id}`}
      className={classNames(getClassName('participant', mergedStyles), {
        [getClassName('participant__video--muted', mergedStyles)]: videoIsMuted,
        [getClassName('participant__audio--muted', mergedStyles)]: audioIsMuted,
      })}
    >
      <div className={getClassName('participant__name', mergedStyles)}>{name}</div>
      <div
        className={classNames(getClassName('participant__video-container', mergedStyles), {
          [getClassName('participant__video-container--speaking', mergedStyles)]: showSpeaking,
          [getClassName('participant__video-container--local', mergedStyles)]: isLocal,
        })}
      >
        {videoIsMuted ? (
          <div className={getClassName('participant__avatar', mergedStyles)}>{name?.slice(0, 1) || ''}</div>
        ) : (
          <Video videoStream={primaryVideoTrack.track} />
        )}
      </div>
      <div className={getClassName('participant__status-icons', mergedStyles)}>
        {videoIsMuted && <div className={getClassName('participant__no-video-icon', mergedStyles)} />}
        {audioIsMuted && <div className={getClassName('participant__no-audio-icon', mergedStyles)} />}
        <div className={getClassName(`participant__${connectionQuality}-quality-icon`, mergedStyles)} />
      </div>
      {ExtensionElement && (
        <ExtensionElement
          participantId={id}
          participantName={name}
          isLocal={isLocal}
          isSpeaking={showSpeaking}
          connectionQuality={connectionQuality}
          videoIsMuted={videoIsMuted}
          audioIsMuted={audioIsMuted}
          isScreenSharing={isScreenSharing}
        />
      )}
      {withAudio && !audioIsMuted && !isLocal && <Audio audioStream={primaryAudioTrack.track} />}
    </div>
  )
}
