import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';

const AudioTrack = React.memo(
  ({ track }) => {
    const audioRef = useRef(null);

    useEffect(() => {
      if (!audioRef.current) return false;
      let playTimeout;

      const handleCanPlay = () => {
        playTimeout = setTimeout(() => {
          console.log('Unable to autoplay audio element');
        }, 1500);
      };
      const handlePlay = () => {
        clearTimeout(playTimeout);
      };
      audioRef.current.addEventListener('canplay', handleCanPlay);
      audioRef.current.addEventListener('play', handlePlay);
      audioRef.current.srcObject = new MediaStream([track]);

      const audioEl = audioRef.current;

      return () => {
        audioEl?.removeEventListener('canplay', handleCanPlay);
        audioEl?.removeEventListener('play', handlePlay);
      };
    }, [track]);

    return track ? (
      <audio autoPlay playsInline ref={audioRef}>
        <track kind="captions" />
      </audio>
    ) : null;
  },
  () => true
);

AudioTrack.propTypes = {
  track: PropTypes.object,
};

export default AudioTrack;
