// @flow

import React, { useEffect, useState } from 'react';

import { AudioLevelIndicator } from '../../../audio-level-indicator';
import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';

const JitsiTrackEvents = JitsiMeetJS.events.track;

type Props = {

    /**
     * The audio track related to the participant.
     */
    _audioTrack: ?Object
}

const ThumbnailAudioIndicator = ({
    _audioTrack
}: Props) => {
    const [ audioLevel, setAudioLevel ] = useState(0);

    useEffect(() => {
        setAudioLevel(0);
        if (_audioTrack) {
            const { jitsiTrack } = _audioTrack;

            jitsiTrack && jitsiTrack.on(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
        }

        return () => {
            if (_audioTrack) {
                const { jitsiTrack } = _audioTrack;

                jitsiTrack && jitsiTrack.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
            }
        };
    }, [ _audioTrack ]);

    return (
        <span className = 'audioindicator-container'>
            <AudioLevelIndicator audioLevel = { audioLevel } />
        </span>
    );
};

export default ThumbnailAudioIndicator;