function MainComponent() { const [folders, setFolders] = React.useState([]); const [currentFolder, setCurrentFolder] = React.useState(null); const [editingFolder, setEditingFolder] = React.useState(null); const [editingCard, setEditingCard] = React.useState(null); const [bookmarkFilter, setBookmarkFilter] = React.useState(false); const [checkFilter, setCheckFilter] = React.useState(false); const [testMode, setTestMode] = React.useState(false); const [currentTestCardIndex, setCurrentTestCardIndex] = React.useState(0); const [answer, setAnswer] = React.useState(''); const toggleBookmark = (card)=>{ card.bookmarked = !card.bookmarked; setFolders([ ...folders ]); }; const toggleCheck = (card)=>{ card.checked = !card.checked; setFolders([ ...folders ]); }; const handleCardChange = (e, card, side)=>{ card[side] = e.target.value; setFolders([ ...folders ]); }; const toggleBookmarkFilter = ()=>setBookmarkFilter(!bookmarkFilter); const toggleCheckFilter = ()=>setCheckFilter(!checkFilter); const toggleTestMode = ()=>setTestMode(!testMode); const handleAnswerChange = (e)=>setAnswer(e.target.value); const handleNextTestCard = ()=>{ setAnswer(''); setCurrentTestCardIndex(currentTestCardIndex + 1); }; const getFilteredCards = ()=>{ if (!folders) return []; let allCards = []; folders.forEach((folder)=>{ const gatherCards = (f)=>{ allCards = [ ...allCards, ...f.cards ]; f.subfolders.forEach((sub)=>gatherCards(sub)); }; gatherCards(folder); }); return allCards.filter((card)=>(!bookmarkFilter || card.bookmarked) && (!checkFilter || !card.checked)); }; const currentTestCard = getFilteredCards()[currentTestCardIndex]; const [cardFront, setCardFront] = React.useState(''); const [cardBack, setCardBack] = React.useState(''); const addCard = ()=>{ folders.push({ front: cardFront, back: cardBack, bookmarked: false, checked: false }); setCardFront(''); setCardBack(''); setFolders([ ...folders ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, !testMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleBookmarkFilter, className: "bg-blue-500 text-white px-4 py-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, bookmarkFilter ? 'Show All' : 'Show Bookmarked'), /*#__PURE__*/ React.createElement("button", { onClick: toggleCheckFilter, className: "bg-green-500 text-white px-4 py-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, checkFilter ? 'Show All' : 'Show Unchecked')), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", value: cardFront, onChange: (e)=>setCardFront(e.target.value), placeholder: "New Card Front", name: "newCardFront", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 mb-2 w-full", value: cardBack, onChange: (e)=>setCardBack(e.target.value), placeholder: "New Card Back", name: "newCardBack", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white px-4 py-2 w-full mb-4", onClick: addCard, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Add Card"), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, getFilteredCards().map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 mb-2 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, editingCard === card ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "text-md font-semibold", value: card.front, onChange: (e)=>handleCardChange(e, card, 'front'), onBlur: ()=>setEditingCard(null), autoFocus: true, name: "cardFront", __source: { fileName: "", lineNumber: 96, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "text-md font-semibold", value: card.back, onChange: (e)=>handleCardChange(e, card, 'back'), onBlur: ()=>setEditingCard(null), name: "cardBack", __source: { fileName: "", lineNumber: 104, columnNumber: 27 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { onClick: ()=>setEditingCard(card), __source: { fileName: "", lineNumber: 113, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-md font-semibold", __source: { fileName: "", lineNumber: 114, columnNumber: 27 }, __self: this }, "Front: ", card.front), /*#__PURE__*/ React.createElement("div", { className: "text-md font-semibold", __source: { fileName: "", lineNumber: 115, columnNumber: 27 }, __self: this }, "Back: ", card.back)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `fa ${card.bookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`, onClick: ()=>toggleBookmark(card), __source: { fileName: "", lineNumber: 119, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `fa ${card.checked ? 'fa-check-square' : 'fa-square-o'}`, onClick: ()=>toggleCheck(card), __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }))))))))), testMode && currentTestCard && /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-2 mb-2 rounded-lg", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-md font-semibold mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Front: ", currentTestCard.front), /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full mb-2", value: answer, onChange: handleAnswerChange, name: "testAnswer", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 mr-2", onClick: ()=>alert(currentTestCard.back), __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Answer"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2", onClick: handleNextTestCard, __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "OK"))), /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2", onClick: toggleTestMode, __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, testMode ? 'Exit Test Mode' : 'Test Mode')); }