import { AnimatePresence, motion } from 'framer-motion';
import { useTodoStore } from '../store/useTodoStore';
import { Filters } from './Filters';
import { TodoItem } from './TodoItem';

export const TodoList = () => {
  const todos = useTodoStore(state => state.todos);
  const filter = useTodoStore(state => state.filter);

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    <div className="todo-list-container">
      <Filters />
      <div className="list">
        <AnimatePresence mode="popLayout">
          {filteredTodos.length > 0 ? (
            <>
              {filteredTodos
                .filter(e => !e.completed)
                .map(todo => (
                  <TodoItem key={todo.id} todo={todo} />
                ))}
              {filteredTodos
                .filter(e => e.completed)
                .map(todo => (
                  <TodoItem key={todo.id} todo={todo} />
                ))}
            </>
          ) : (
            <motion.div
              initial={{
                opacity: 0,
              }}
              animate={{
                opacity: 1,
              }}
            >
              暂无代办事项
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};