// The Study page's "Study aids" tab: IQ Bible's aids for a verse of the chunk being studied (the first by
// default). Topics can be added to the chunk as tags with one tap.
import { useState } from 'react';
import IqStudyAids from './IqStudyAids.jsx';

export default function IqChunkAids({ chunk, chapter, updateChunk, notify }) {
  const [picked, setPicked] = useState(null);
  const last = Math.min(chunk.endVerse, chunk.startVerse + 59);
  const verse = picked != null && picked >= chunk.startVerse && picked <= last ? picked : chunk.startVerse;
  const verses = Array.from({ length: last - chunk.startVerse + 1 }, (_, i) => chunk.startVerse + i);
  const addTag = (name) => {
    const tags = chunk.tags ?? [];
    if (tags.some((t) => t.toLowerCase() === name.toLowerCase())) { notify(`“${name}” is already a tag.`, 1600); return; }
    updateChunk(chunk.id, { tags: [...tags, name] });
    notify(`Added the tag “${name}”.`, 1600);
  };
  return (
    <div>
      {verses.length > 1 && (
        <label className="mb-3 block text-xs text-[var(--r-sub)]">Aids for verse{' '}
          <select value={verse} onChange={(e) => setPicked(Number(e.target.value))} className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-xs text-[var(--r-text)]">
            {verses.map((v) => <option key={v} value={v}>{v}</option>)}
          </select>
        </label>
      )}
      <IqStudyAids key={`${chapter.bookAbbrev}${chapter.chapter}${verse}`} book={chapter.bookAbbrev} chapter={Number(chapter.chapter)} verse={verse} onTag={addTag} />
    </div>
  );
}