'use client';

import { observer } from 'mobx-react-lite';
import React, { useLayoutEffect, useRef } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { SILENT_AUDIO_URL } from '@/utils/constants';

const PlaybarAudioElements: React.FC = observer(() => {
  const { playbar } = useStores();

  const audioRef = useRef<HTMLAudioElement>(null);
  const silentAudioRef = useRef<HTMLAudioElement>(null);

  useLayoutEffect(() => {
    if (audioRef.current) {
      playbar.setAudioElement(audioRef.current);
    }
  }, [playbar.setAudioElement, playbar, audioRef]);

  useLayoutEffect(() => {
    if (silentAudioRef.current) {
      playbar.setSilentAudioElement(silentAudioRef.current);
    }
  }, [playbar.setSilentAudioElement, playbar, silentAudioRef]);

  return (
    <>
      <audio
        id='active-audio-play'
        ref={audioRef}
        src={undefined}
        crossOrigin='anonymous'
      />
      {/* this is needed to keep media session alive + smoother transitions between songs in playbarStore */}
      <audio id='silent-audio' ref={silentAudioRef} src={SILENT_AUDIO_URL} />
    </>
  );
});

export default PlaybarAudioElements;