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

// MUI Imports
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import InputAdornment from '@mui/material/InputAdornment'
import Typography from '@mui/material/Typography'

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

// Third-party Imports
import PerfectScrollbar from 'react-perfect-scrollbar'

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

type Props = {
  todos: TodoType[]
  searchTerm: string
  setSearchTerm: (term: string) => void
  onToggleComplete: (id: number) => void
  onToggleStar: (id: number) => void
  onToggleImportant: (id: number) => void
  onDelete: (id: number) => void
  onTodoClick: (todo: TodoType) => void
  onUpdate?: (todo: TodoType) => void
  isBelowMdScreen: boolean
  onSidebarToggle: () => void
}

const TodoContent = (props: Props) => {
  // Props
  const {
    todos,
    searchTerm,
    setSearchTerm,
    onToggleComplete,
    onToggleStar,
    onToggleImportant,
    onDelete,
    onTodoClick,
    onUpdate,
    isBelowMdScreen,
    onSidebarToggle
  } = props

  const filteredTodos = todos.filter(todo => {
    if (searchTerm) {
      const searchLower = searchTerm.toLowerCase()
      return (
        todo.title.toLowerCase().includes(searchLower) || todo.description.toLowerCase().includes(searchLower)
      )
    }
    return true
  })

  return (
    <Box className='flex flex-col bs-full is-full' sx={{ width: '100%' }}>
      <Box className='flex items-center gap-4 p-4 border-be border-solid border-bs'>
        {isBelowMdScreen && (
          <IconButton onClick={onSidebarToggle} size='small'>
            <i className='tabler-menu-2 text-xl' />
          </IconButton>
        )}
        <CustomTextField
          fullWidth
          placeholder='Search...'
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
          slotProps={{
            input: {
              startAdornment: (
                <InputAdornment position='start'>
                  <i className='tabler-search text-xl text-textSecondary' />
                </InputAdornment>
              )
            }
          }}
        />
      </Box>
      <Box className='flex-1 min-bs-0' sx={{ height: '100%' }}>
        <PerfectScrollbar className='bs-full' options={{ wheelPropagation: false }}>
          <Box component='ul' className='p-0 m-0 list-none'>
            {filteredTodos.length === 0 ? (
              <Box className='flex items-center justify-center p-8 bs-full'>
                <Typography variant='body2' color='text.secondary'>
                  No todos found
                </Typography>
              </Box>
            ) : (
              filteredTodos.map(todo => (
                <TodoItem
                  key={todo.id}
                  todo={todo}
                  onToggleComplete={onToggleComplete}
                  onToggleStar={onToggleStar}
                  onToggleImportant={onToggleImportant}
                  onDelete={onDelete}
                  onClick={onTodoClick}
                  onUpdate={onUpdate}
                />
              ))
            )}
          </Box>
        </PerfectScrollbar>
      </Box>
    </Box>
  )
}

export default TodoContent

