'use client';

import React, { useContext, useLayoutEffect, useRef } from 'react';

import audioContext from '@/lib/audioContext';

import { LiveRadioContext } from './LiveRadioProvider';

const LiveRadioAudioBus: React.FC = () => {
  const { setAudioElement, setSourceNode } = useContext(LiveRadioContext);

  const audioRef = useRef<HTMLAudioElement>(null);
  const sourceNodeRef = useRef<MediaElementAudioSourceNode | null>(null);

  useLayoutEffect(() => {
    if (audioRef.current && setAudioElement) {
      setAudioElement(audioRef.current);

      // Create source node if not already created
      if (!sourceNodeRef.current) {
        try {
          sourceNodeRef.current = audioContext.createMediaElementSource(
            audioRef.current
          );
          sourceNodeRef.current.connect(audioContext.destination);
        } catch (error) {
          console.error('Error creating audio source node', error);
        }
      }

      // Set the source node
      if (sourceNodeRef.current && setSourceNode) {
        setSourceNode(sourceNodeRef.current);
      }
    }
  }, [setAudioElement, setSourceNode]);

  return <audio ref={audioRef} crossOrigin='anonymous' />;
};

export default LiveRadioAudioBus;