import { observer } from 'mobx-react';
import { MediaButton } from './MediaButton';
import { useAudioX } from './audiox/AudioX';
import { AudioPlayer } from './AudioPlayer';

interface RecorderProps {
  /**
   * Whether to show the recordings for playback.
   */
  showRecordings?: boolean;
}
/**
 * A component for recording audio.
 * Use this component to record audio.
 * This component uses AudioX library to record audio.
 */
export const Recorder = observer((props: RecorderProps) => {
  const { showRecordings = true } = props;
  const { recorder, stopRecording, startRecording, voiceMemos } = useAudioX();
  return (
    <>
      <MediaButton
        record={true}
        isPlaying={recorder.recording}
        onToggle={() => {
          if (recorder.recording) {
            stopRecording();
          } else {
            startRecording(false);
          }
        }}
      />
      {showRecordings && (
        <div>
          {voiceMemos?.map((recording, index) => (
            <div key={index}>
              <AudioPlayer src={recording.url} />
            </div>
          ))}
        </div>
      )}
    </>
  );
});