import { useState } from "react/cjs/react.development";
import { createContext, useEffect } from "react/cjs/react.production.min";

export const TodoContext = createContext();

export const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    setTodos(JSON.parse(localStorage.getItem("todoArray")));
  }, []);

  useEffect(() => {
    localStorage.setItem("todoArray", JSON.stringify(todos));
  }, [todos]);

  let props = {
    todos,
    removeTodo: (inputId) =>
      setTodos((prevTodos) => prevTodos.filter(({ id }) => inputId === id)),
    addTodo: (inputObj) => setTodos((prevTodos) => [...prevTodos, inputObj]),
  };

  return <TodoContext.Provider value={props}>{children}</TodoContext.Provider>;
};