// React Imports
import { useState, useEffect } from 'react'

// MUI Imports
import CardContent from '@mui/material/CardContent'
import Grid from '@mui/material/Grid2'
import MenuItem from '@mui/material/MenuItem'

// Type Imports
import type { TodoType, TodoStatusType, TodoPriorityType } from '@/types/apps/todoTypes'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'

const TableFilters = ({
  setData,
  tableData
}: {
  setData: (data: TodoType[]) => void
  tableData?: TodoType[]
}) => {
  // States
  const [status, setStatus] = useState<TodoStatusType | ''>('')
  const [priority, setPriority] = useState<TodoPriorityType | ''>('')

  useEffect(() => {
    const filteredData = tableData?.filter(todo => {
      if (status && todo.status !== status) return false
      if (priority && todo.priority !== priority) return false

      return true
    })

    setData(filteredData || [])
  }, [status, priority, tableData, setData])

  return (
    <CardContent>
      <Grid container spacing={6}>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-status'
            value={status}
            onChange={e => setStatus(e.target.value as TodoStatusType | '')}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Select Status</MenuItem>
            <MenuItem value='pending'>در انتظار</MenuItem>
            <MenuItem value='in-progress'>In Progress</MenuItem>
            <MenuItem value='completed'>Completed</MenuItem>
          </CustomTextField>
        </Grid>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-priority'
            value={priority}
            onChange={e => setPriority(e.target.value as TodoPriorityType | '')}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Select Priority</MenuItem>
            <MenuItem value='high'>High</MenuItem>
            <MenuItem value='medium'>Medium</MenuItem>
            <MenuItem value='low'>Low</MenuItem>
          </CustomTextField>
        </Grid>
      </Grid>
    </CardContent>
  )
}

export default TableFilters


