import Sheet from './Sheet.jsx';
import AudioPlayer from '../AudioPlayer.jsx';

// Wraps the existing player. Audio is BSB-only, so licensed translations get a note.
export default function AudioSheet({ open, onClose, translation, bookName, chapter, audio, narrator, onNarrator, onNext, nextDisabled }) {
  return (
    <Sheet open={open} onClose={onClose} title="Listen">
      <AudioPlayer
        title={`${bookName} ${chapter}`}
        subtitle={audio.state.status === 'error'
          ? "Couldn't load audio for this chapter/narrator."
          : translation === 'ESV'
            ? 'ESV audio, read by David Cochran Heath. It follows the chapter as you browse.'
            : translation !== 'BSB'
            ? `Audio is BSB only — no ${translation} audio is available, so it won't match the ${translation} text on screen.`
            : 'Audio follows the chapter as you browse.'}
        status={audio.state.status}
        currentTime={audio.progress.currentTime}
        duration={audio.progress.duration}
        onPlay={audio.play}
        onTogglePause={audio.togglePause}
        onSeekBack={() => audio.seek(-10)}
        onSeekForward={() => audio.seek(10)}
        onSeekTo={audio.seekTo}
        onNext={onNext}
        nextDisabled={nextDisabled}
        onStop={audio.stop}
        controls={translation === 'ESV' ? null : (
          <select value={narrator} onChange={(e) => onNarrator(e.target.value)}
            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
            <option value="david">David</option>
            <option value="hays">Hays</option>
            <option value="souer">Souer</option>
          </select>
        )}
      />
    </Sheet>
  );
}