// The second Bible in the side-by-side view: loads the same chapter in another translation.
// Pass an empty translation to switch it off.
import { useEffect, useState } from 'react';
import { fetchChapter } from '../utils/bibleText.js';

export function useParallelChapter(translation, bookAbbrev, chapter) {
  const [state, setState] = useState({ key: '', verses: [], error: '' });
  const key = translation ? `${translation}/${bookAbbrev}/${chapter}` : '';

  useEffect(() => {
    if (!key) return undefined;
    const controller = new AbortController();
    fetchChapter(translation, bookAbbrev, chapter, { signal: controller.signal })
      .then(({ verses }) => setState({ key, verses, error: '' }))
      .catch((err) => { if (!controller.signal.aborted) setState({ key, verses: [], error: err.message || 'Unable to load.' }); });
    return () => controller.abort();
  }, [key]); // eslint-disable-line react-hooks/exhaustive-deps

  const ready = state.key === key;
  return {
    verses: ready ? state.verses : [],
    error: ready ? state.error : '',
    loading: !!key && !ready,
  };
}