/* global React, Icon, IconBtn, db */
/* Flashcard study session.
* Loads due cards (+ optional new-card overflow up to the session-length tweak),
* shuffles them, shows a prompt → reveal → rate flow, and writes FSRS updates
* to the DB after each rating.
*/
const { useState, useEffect, useMemo, useCallback, useRef } = React;
const KEY_BINDINGS = {
'1-4': { again: ['1'], hard: ['2'], good: ['3'], easy: ['4'], reveal: [' ', 'Enter'] },
'asdf': { again: ['a', 'A'], hard: ['s', 'S'], good: ['d', 'D'], easy: ['f', 'F'], reveal: [' ', 'Enter'] },
'hjkl': { again: ['h', 'H'], hard: ['j', 'J'], good: ['k', 'K'], easy: ['l', 'L'], reveal: [' ', 'Enter'] },
};
const RATINGS = [
{ id: 1, key: 'again', label: 'Again', cls: 'r-again' },
{ id: 2, key: 'hard', label: 'Hard', cls: 'r-hard' },
{ id: 3, key: 'good', label: 'Good', cls: 'r-good' },
{ id: 4, key: 'easy', label: 'Easy', cls: 'r-easy' },
];
function FlashcardStudy({ collection, cards, prefs, onExit }) {
const { isDue, fsrsReview, fsrsPreviewInterval, fieldPreview } = window.flashcards;
const keymap = KEY_BINDINGS[prefs.keyboardLayout] || KEY_BINDINGS['1-4'];
// Build the queue. 'due' mode = due cards + new cards (up to session-length limit).
// 'all' mode = every card in the collection, shuffled — lets the user re-review
// even when nothing is due.
const buildQueue = useCallback((studyMode) => {
const limit = prefs.sessionLength === -1 ? Infinity : prefs.sessionLength;
let pool = [];
if (studyMode === 'all') {
pool = [...cards];
} else {
const due = cards.filter(c => isDue(c) && c.fsrs?.state !== 'new');
const newCards = cards.filter(c => !c.fsrs || c.fsrs.state === 'new');
let di = 0, ni = 0;
while (pool.length < limit && (di < due.length || ni < newCards.length)) {
if (di < due.length) pool.push(due[di++]);
if (pool.length >= limit) break;
if (ni < newCards.length) pool.push(newCards[ni++]);
}
}
if (pool.length > limit) pool = pool.slice(0, limit);
for (let i = pool.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[pool[i], pool[j]] = [pool[j], pool[i]];
}
return pool;
// cards/prefs are captured at first mount intentionally
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const [queue, setQueue] = useState(() => buildQueue('due'));
const [idx, setIdx] = useState(0);
const [revealed, setRevealed] = useState(false);
const [sessionStart] = useState(() => Date.now());
const [ratings, setRatings] = useState({ again: 0, hard: 0, good: 0, easy: 0 });
const [transition, setTransition] = useState(null); // 'leave' | 'enter' | null (for non-flip animations)
const card = queue[idx] || null;
const done = idx >= queue.length;
// Reset reveal state when card changes
useEffect(() => { setRevealed(false); }, [idx]);
// Update lastStudiedAt on entering
useEffect(() => {
if (queue.length > 0) {
db.flashcardCollections.put({ ...collection, lastStudiedAt: Date.now() });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const advance = useCallback(async (rating) => {
if (!card) return;
// Compute new FSRS state
const nextFsrs = fsrsReview(card.fsrs, rating, Date.now());
await db.flashcardCards.put({ ...card, fsrs: nextFsrs });
setRatings(prev => ({ ...prev, [RATINGS.find(r => r.id === rating).key]: prev[RATINGS.find(r => r.id === rating).key] + 1 }));
// "Again" puts the card back near the end of the current queue
if (rating === 1) {
setQueue(prev => {
const next = [...prev];
const moved = next.splice(idx, 1)[0];
const insertAt = Math.min(next.length, idx + 4);
next.splice(insertAt, 0, moved);
return next;
});
// Stay at same idx — the next-up card has shifted in
animateNext(false);
} else {
animateNext(true);
}
}, [card, idx, fsrsReview]);
// Animate transition based on tweaks
const animateNext = (advanceIdx) => {
const anim = prefs.flipAnimation;
if (anim === 'none' || anim === 'flip') {
// Flip: just unflip and advance
if (advanceIdx) setIdx(i => i + 1);
setRevealed(false);
} else {
setTransition('leave');
setTimeout(() => {
if (advanceIdx) setIdx(i => i + 1);
setRevealed(false);
setTransition('enter');
setTimeout(() => setTransition(null), 30);
}, 200);
}
};
// Keyboard handlers
useEffect(() => {
const onKey = (e) => {
if (e.target?.tagName === 'INPUT' || e.target?.tagName === 'TEXTAREA') return;
if (e.key === 'Escape') { e.preventDefault(); onExit(); return; }
if (!revealed) {
if (keymap.reveal.includes(e.key)) { e.preventDefault(); setRevealed(true); }
return;
}
for (const r of RATINGS) {
if (keymap[r.key].includes(e.key)) { e.preventDefault(); advance(r.id); return; }
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [revealed, advance, keymap, onExit]);
const restartWithAll = useCallback(() => {
setQueue(buildQueue('all'));
setIdx(0);
setRevealed(false);
setRatings({ again: 0, hard: 0, good: 0, easy: 0 });
}, [buildQueue]);
if (queue.length === 0) {
return (
Nothing due right now
{cards.length === 0
? 'This collection is empty — add cards before starting a session.'
: `All ${cards.length} card${cards.length === 1 ? ' is' : 's are'} scheduled for later. You can still re-review them if you want extra practice.`}