import { Card, Grid, Typography } from '@mui/joy'
import moment from 'moment'
import ChoreCard from '../Chores/ChoreCard'

const DemoMyChore = () => {
  const cards = [
    {
      id: 12,
      name: '♻️ Take out recycle ',
      frequencyType: 'days_of_the_week',
      frequency: 1,
      frequencyMetadata:
        '{"days":["thursday"],"time":"2024-07-07T22:00:00-04:00"}',
      nextDueDate: moment().add(1, 'days').hour(8).minute(0).toISOString(),
      isRolling: false,
      assignedTo: 1,
    },
    {
      id: 9,
      name: '🐜 Spray Pesticide',
      frequencyType: 'interval',
      frequency: 3,
      frequencyMetadata: '{"unit":"months"}',
      nextDueDate: moment().subtract(7, 'day').toISOString(),
      isRolling: false,
      assignedTo: 1,
    },
    {
      id: 6,
      name: '🍂 Gutter Cleaning',
      frequencyType: 'day_of_the_month',
      frequency: 1,
      frequencyMetadata: '{"months":["may"]}',
      nextDueDate: moment()
        .month('may')
        .year(moment().year() + 1)
        .date(1)
        .hour(17)
        .minute(0)
        .toISOString(),
      isRolling: false,
      assignedTo: 1,
    },
    // {
    //   id: 10,
    //   name: '💨 Air dust Synology NAS and',
    //   frequencyType: 'interval',
    //   frequency: 12,
    //   frequencyMetadata: '{"unit":"weeks"}',
    //   nextDueDate: '2024-07-24T17:18:00Z',
    //   isRolling: false,
    //   assignedTo: 1,
    // },
    // {
    //   id: 8,
    //   name: '🛁 Deep Cleaning Bathroom',
    //   frequencyType: 'monthly',
    //   frequency: 1,
    //   frequencyMetadata: '{}',
    //   nextDueDate: '2024-08-04T17:15:00Z',
    //   isRolling: false,
    //   assignedTo: 1,
    // },
    // {
    //   id: 11,
    //   name: '☴ Replace AC Air filter',
    //   frequencyType: 'adaptive',
    //   frequency: 1,
    //   frequencyMetadata: '{"unit":"days"}',
    //   nextDueDate: moment().add(120, 'days').toISOString(),
    //   isRolling: false,
    //   assignedTo: 1,
    // },
    // {
    //   id: 6,
    //   name: '🍂 Gutter Cleaning ',
    //   frequencyType: 'day_of_the_month',
    //   frequency: 1,
    //   frequencyMetadata: '{"months":["may"]}',
    //   nextDueDate: '2025-05-01T17:00:00Z',
    //   isRolling: false,
    //   assignedTo: 1,
    // },
    // {
    //   id: 13,
    //   name: '🚰 Replace Water Filter',
    //   frequencyType: 'yearly',
    //   frequency: 1,
    //   frequencyMetadata: '{}',
    //   nextDueDate: '2025-07-08T01:00:00Z',
    //   isRolling: false,
    //   assignedTo: 1,
    // },
  ]

  const users = [{ displayName: 'Me', id: 1 }]
  return (
    <>
      <Grid item xs={12} sm={5} data-aos-first-tasks-list>
        {cards.map((card, index) => (
          <div
            key={index}
            data-aos-delay={100 * index + 200}
            data-aos-anchor='[data-aos-first-tasks-list]'
            data-aos='fade-up'
          >
            <ChoreCard chore={card} performers={users} viewOnly={true} />
          </div>
        ))}
      </Grid>
      <Grid item xs={12} sm={7} data-aos-my-chore-demo-section>
        <Card
          sx={{
            p: 4,
            py: 6,
          }}
          data-aos-delay={200}
          data-aos-anchor='[data-aos-my-chore-demo-section]'
          data-aos='fade-left'
        >
          <Typography level='h3' textAlign='center' sx={{ mt: 2, mb: 4 }}>
            Glance at your task and chores
          </Typography>
          <Typography level='body-lg' textAlign='center' sx={{ mb: 4 }}>
            Main view prioritize tasks due today, followed by overdue ones, and
            finally, future tasks or those without due dates. With Donetick, you
            can view all the tasks you've created (whether assigned to you or
            not) as well as tasks assigned to you by others. Quickly mark them
            as done with just one click, ensuring a smooth and efficient task
            management experience.
          </Typography>
        </Card>
      </Grid>
    </>
  )
}

export default DemoMyChore