function MainComponent() { const [sessionActive, setSessionActive] = React.useState(false); const [breakTime, setBreakTime] = React.useState(false); const [selectedMusicGenre, setSelectedMusicGenre] = React.useState(''); const handleBeginSession = (e)=>{ e.preventDefault(); setSessionActive(true); }; const handleChange = (e)=>{ setSelectedMusicGenre(e.target.value); }; React.useEffect(()=>{ const sessionDuration = 25 * 60 * 1000; const breakDuration = 5 * 60 * 1000; const totalSessionDuration = 2 * 60 * 60 * 1000; let music = new Audio(`/music/${selectedMusicGenre}.mp3`); music.loop = true; const startTime = Date.now(); if (sessionActive) { music.play(); } else { music.pause(); music.currentTime = 0; } const interval = setInterval(()=>{ const currentTime = Date.now(); const elapsedTime = currentTime - startTime; if (elapsedTime >= totalSessionDuration) { clearInterval(interval); setSessionActive(false); setBreakTime(false); music.pause(); music.currentTime = 0; } else if (!breakTime && elapsedTime % (sessionDuration + breakDuration) >= sessionDuration) { setBreakTime(true); music.pause(); } else if (breakTime && elapsedTime % (sessionDuration + breakDuration) < sessionDuration) { setBreakTime(false); music.play(); } }, 1000); return ()=>{ clearInterval(interval); music.pause(); }; }, [ sessionActive, breakTime, selectedMusicGenre ]); return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] ${sessionActive ? "bg-[#d1d8e0]" : ""}`, __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Select Your Writing Session Music"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleBeginSession, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "musicGenre", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Book Genre for Music"), /*#__PURE__*/ React.createElement("select", { name: "musicGenre", className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", onChange: handleChange, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "classical", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Classical"), /*#__PURE__*/ React.createElement("option", { value: "horror", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Horror"), /*#__PURE__*/ React.createElement("option", { value: "fantasy", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Fantasy"), /*#__PURE__*/ React.createElement("option", { value: "romance", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Romance"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Begin Session"))))); }