import { CalendarMonth, CancelScheduleSend, Check, Checklist, Edit, History, PeopleAlt, Person, SwitchAccessShortcut, Timelapse, } from '@mui/icons-material' import { Box, Button, Card, Checkbox, Chip, Container, FormControl, Grid, Input, ListItem, ListItemContent, Sheet, Snackbar, styled, Typography, } from '@mui/joy' import { Divider } from '@mui/material' import moment from 'moment' import { useEffect, useState } from 'react' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { GetAllUsers, GetChoreDetailById, MarkChoreComplete, SkipChore, } from '../../utils/Fetcher' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' const IconCard = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0f0f0', // Adjust the background color as needed borderRadius: '50%', minWidth: '40px', height: '40px', marginRight: '16px', }) const ChoreView = () => { const [chore, setChore] = useState({}) const navigate = useNavigate() const [performers, setPerformers] = useState([]) const [infoCards, setInfoCards] = useState([]) const { choreId } = useParams() const [note, setNote] = useState(null) const [searchParams] = useSearchParams() const [isPendingCompletion, setIsPendingCompletion] = useState(false) const [timeoutId, setTimeoutId] = useState(null) const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null) const [completedDate, setCompletedDate] = useState(null) const [confirmModelConfig, setConfirmModelConfig] = useState({}) 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 = [ { size: 6, icon: , text: 'Assigned To', subtext: performers.find(p => p.id === chore.assignedTo)?.displayName, }, { size: 6, icon: , text: 'Due Date', subtext: chore.nextDueDate ? moment(chore.nextDueDate).fromNow() : 'N/A', }, // { // icon: , // text: 'Frequency', // subtext: // chore.frequencyType.charAt(0).toUpperCase() + // chore.frequencyType.slice(1), // }, { size: 6, icon: , text: 'Total Completed', subtext: `${chore.totalCompletedCount} times`, }, { size: 6, icon: , text: 'Last Completed', subtext: // chore.lastCompletedDate && // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), chore.lastCompletedDate && moment(chore.lastCompletedDate).fromNow(), }, { size: 6, icon: , text: 'Last Performer', subtext: chore.lastCompletedDate ? `${ performers.find(p => p.id === chore.lastCompletedBy)?.displayName }` : '--', }, { size: 6, icon: , text: 'Created By', subtext: performers.find(p => p.id === chore.createdBy)?.displayName, }, // { // size: 12, // 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) } const handleSkippingTask = () => { SkipChore(choreId).then(response => { if (response.ok) { response.json().then(data => { const newChore = data.res setChore(newChore) }) } }) } return ( {chore.name} } size='lg' sx={{ mb: 4 }}> {chore.nextDueDate ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}` : 'N/A'} Details {infoCards.map((detail, index) => ( {/* divider between the list items: */} {detail.text} {detail.subtext ? detail.subtext : '--'} ))} {chore.notes && ( <> Previous note: {chore.notes || '--'} )} {/* */} Actions Complete the task { if (e.target.checked) { setNote('') } else { setNote(null) } }} overlay sx={ { // my: 1, } } label={ Add Additional Notes } /> {note !== null && ( { if (e.target.value.trim() === '') { setNote(null) return } setNote(e.target.value) }} size='md' sx={{ mb: 1, }} /> )} { if (e.target.checked) { setCompletedDate( moment(new Date()).format('YYYY-MM-DDTHH:00:00'), ) } else { setCompletedDate(null) } }} overlay sx={ { // my: 1, } } label={ Specify completion date } /> {completedDate !== null && ( { setCompletedDate(e.target.value) }} /> )} More { 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