import { CalendarMonth, CancelScheduleSend, Check, Checklist, Note, PeopleAlt, Person, } from '@mui/icons-material' import { Box, Button, Checkbox, Container, Divider, FormControl, Grid, Input, ListItem, ListItemContent, ListItemDecorator, Sheet, Snackbar, styled, Typography, } from '@mui/joy' import moment from 'moment' import { useEffect, useState } from 'react' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { GetAllUsers, GetChoreDetailById, MarkChoreComplete, } from '../../utils/Fetcher' const IconCard = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0f0f0', // Adjust the background color as needed borderRadius: '50%', minWidth: '50px', height: '50px', marginRight: '16px', }) const ChoreView = () => { const [chore, setChore] = useState({}) const [performers, setPerformers] = useState([]) const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() const [note, setNote] = useState(null) const Navigate = useNavigate() const [searchParams] = useSearchParams() const [isPendingCompletion, setIsPendingCompletion] = useState(false) const [timeoutId, setTimeoutId] = useState(null) const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null) const [completedDate, setCompletedDate] = useState(null) useEffect(() => { Promise.all([ GetChoreDetailById(choreId).then(resp => { if (resp.ok) { return resp.json().then(data => { setChore(data.res) }) } }), GetAllUsers() .then(response => response.json()) .then(data => { setPerformers(data.res) }), ]) const auto_complete = searchParams.get('auto_complete') if (auto_complete === 'true') { handleTaskCompletion() } }, []) useEffect(() => { if (chore && performers.length > 0) { generateInfoCards(chore) } }, [chore, performers]) const generateInfoCards = chore => { const cards = [ { icon: , text: 'Due Date', subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), }, { icon: , text: 'Assigned To', subtext: performers.find(p => p.id === chore.assignedTo)?.displayName, }, { icon: , text: 'Created By', subtext: performers.find(p => p.id === chore.createdBy)?.displayName, }, // { // icon: , // text: 'Frequency', // subtext: // chore.frequencyType.charAt(0).toUpperCase() + // chore.frequencyType.slice(1), // }, { icon: , text: 'Total Completed', subtext: `${chore.totalCompletedCount}`, }, // { // icon: , // text: 'Last Completed', // subtext: // chore.lastCompletedDate && // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), // }, { icon: , text: 'Last Completed', subtext: chore.lastCompletedDate ? `${ chore.lastCompletedDate && moment(chore.lastCompletedDate).fromNow() // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A')) }( ${ performers.find(p => p.id === chore.lastCompletedBy) ?.displayName } )` : 'Never', }, { icon: , text: 'Recent Note', subtext: chore.notes || '--', }, ] setInfoCards(cards) } const handleTaskCompletion = () => { setIsPendingCompletion(true) let seconds = 3 // Starting countdown from 3 seconds setSecondsLeftToCancel(seconds) const countdownInterval = setInterval(() => { seconds -= 1 setSecondsLeftToCancel(seconds) if (seconds <= 0) { clearInterval(countdownInterval) // Stop the countdown when it reaches 0 } }, 1000) const id = setTimeout(() => { MarkChoreComplete(choreId, note, completedDate) .then(resp => { if (resp.ok) { return resp.json().then(data => { setNote(null) setChore(data.res) }) } }) .then(() => { setIsPendingCompletion(false) clearTimeout(id) clearInterval(countdownInterval) // Ensure to clear this interval as well setTimeoutId(null) setSecondsLeftToCancel(null) }) .then(() => { // refetch the chore details GetChoreDetailById(choreId).then(resp => { if (resp.ok) { return resp.json().then(data => { setChore(data.res) }) } }) }) }, 3000) setTimeoutId(id) } return ( {chore.name} {infoCards.map((info, index) => ( {info.icon} {info.text} {info.subtext ? info.subtext : '--'} ))} Additional Notes { if (e.target.value.trim() === '') { setNote(null) return } setNote(e.target.value) }} size='md' sx={{ my: 1, }} /> { if (e.target.checked) { setCompletedDate( moment(new Date()).format('YYYY-MM-DDTHH:00:00'), ) } else { setCompletedDate(null) } }} overlay sx={{ my: 1, }} label={Set completion date} /> {completedDate !== null && ( { setCompletedDate(e.target.value) }} /> )} {completedDate === null && ( // placeholder for the completion date with margin: )} {/* */} { if (timeoutId) { clearTimeout(timeoutId) setIsPendingCompletion(false) setTimeoutId(null) setSecondsLeftToCancel(null) // Reset or adjust as needed } }} size='lg' variant='outlined' color='danger' startDecorator={} > Cancel } > Task will be marked as completed in {secondsLeftToCancel} seconds ) } export default ChoreView