function MainComponent() { const [folders, setFolders] = React.useState([]); const [selectedFolder, setSelectedFolder] = React.useState(null); const [isTestMode, setIsTestMode] = React.useState(false); const [currentCardIndex, setCurrentCardIndex] = React.useState(0); const [answer, setAnswer] = React.useState(""); const createFolder = (name, parent = null)=>{ const newFolder = { id: Date.now(), name, parent, children: [], cards: [] }; if (parent) { const updatedFolders = folders.map((f)=>f.id === parent.id ? { ...f, children: [ ...f.children, newFolder ] } : f); setFolders(updatedFolders); } else { setFolders([ ...folders, newFolder ]); } }; const updateFolderName = (id, name)=>{ const updatedFolders = folders.map((f)=>f.id === id ? { ...f, name } : f); setFolders(updatedFolders); }; const deleteFolder = (id)=>{ const updatedFolders = folders.filter((f)=>f.id !== id); setFolders(updatedFolders); }; const addCard = (folderId, front, back)=>{ const updatedFolders = folders.map((f)=>f.id === folderId ? { ...f, cards: [ ...f.cards, { id: Date.now(), front, back, bookmarked: false, checked: false } ] } : f); setFolders(updatedFolders); }; const updateCard = (folderId, cardId, front, back)=>{ const updatedFolders = folders.map((f)=>f.id === folderId ? { ...f, cards: f.cards.map((c)=>c.id === cardId ? { ...c, front, back } : c) } : f); setFolders(updatedFolders); }; const deleteCard = (folderId, cardId)=>{ const updatedFolders = folders.map((f)=>f.id === folderId ? { ...f, cards: f.cards.filter((c)=>c.id !== cardId) } : f); setFolders(updatedFolders); }; const toggleBookmark = (folderId, cardId)=>{ const updatedFolders = folders.map((f)=>f.id === folderId ? { ...f, cards: f.cards.map((c)=>c.id === cardId ? { ...c, bookmarked: !c.bookmarked } : c) } : f); setFolders(updatedFolders); }; const toggleChecked = (folderId, cardId)=>{ const updatedFolders = folders.map((f)=>f.id === folderId ? { ...f, cards: f.cards.map((c)=>c.id === cardId ? { ...c, checked: !c.checked } : c) } : f); setFolders(updatedFolders); }; const renderFolders = (folders, level = 0)=>folders.map((folder)=>/*#__PURE__*/ React.createElement("div", { key: folder.id, className: `ml-${level * 4}`, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center cursor-pointer", onClick: ()=>setSelectedFolder(folder), __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, level === 0 ? "📂" : level === 1 ? "📁" : "📄"), /*#__PURE__*/ React.createElement("input", { type: "text", value: folder.name, onChange: (e)=>updateFolderName(folder.id, e.target.value), className: "ml-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteFolder(folder.id), __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "❌")), folder.children.length > 0 && renderFolders(folder.children, level + 1))); const renderCards = (folder)=>folder.cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "p-4 shadow-md my-2", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, !isTestMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", value: card.front, onChange: (e)=>updateCard(folder.id, card.id, e.target.value, card.back), className: "border-b border-gray-300 w-full", name: `front_${card.id}`, __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: card.back, onChange: (e)=>updateCard(folder.id, card.id, card.front, e.target.value), className: "border-b border-gray-300 w-full mt-2", name: `back_${card.id}`, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, card.front), index === currentCardIndex && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, card.back, /*#__PURE__*/ React.createElement("input", { type: "text", value: answer, onChange: (e)=>setAnswer(e.target.value), className: "border-b border-gray-300 w-full mt-2", name: "answer", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentCardIndex(currentCardIndex + 1), className: "mt-2 bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "OK"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteCard(folder.id, card.id), __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "❌"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleBookmark(folder.id, card.id), __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, card.bookmarked ? "🔖" : "🔗"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleChecked(folder.id, card.id), __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, card.checked ? "✅" : "🔲")))); const filteredCards = selectedFolder ? selectedFolder.cards.filter((c)=>!c.checked) : []; return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, !isTestMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>createFolder("New Folder"), className: "bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Create Folder"), folders ? renderFolders(folders) : null)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, selectedFolder && !isTestMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>createFolder("New Subfolder", selectedFolder), className: "bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Create Subfolder"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addCard(selectedFolder.id, "Front", "Back"), className: "bg-green-500 text-white p-2 ml-2", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, "Add Card"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, renderCards(selectedFolder))), selectedFolder && isTestMode && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, filteredCards.length > 0 ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, renderCards({ ...selectedFolder, cards: [ filteredCards[currentCardIndex] ] })) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, "No cards available in test mode"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsTestMode(!isTestMode), className: "fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded-full", __source: { fileName: "", lineNumber: 202, columnNumber: 7 }, __self: this }, isTestMode ? "Exit Test Mode" : "Enter Test Mode")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this })); }