import React, { createContext, useState, useEffect } from "react"
import axios from "axios"
import { toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

export const PostContext = createContext()
export const PostProvider = (props) => {
    const [posts, setPosts] = useState([])

    useEffect(() => {
        fetchPost()
    }, [])

    const fetchPost = async () => {
        var response = await axios.get(
            "https://jsonplaceholder.typicode.com/posts?_limit=10"
        )
        console.log("Fetch post success")
        setPosts(response.data)
    }

    const deletePost = async (id) => {
        setPosts((prevPost) => [...prevPost.filter((post) => post.id !== id)])
        var response = await axios.delete(
            "https://jsonplaceholder.typicode.com/posts/" + id
        )
        console.log(response.data)
        notify("Post Deleted")
    }

    const editPost = async (post) => {
        try {
            let newData = [...posts]
            newData = newData.map((item) =>
                item.id === post.id ? { ...post } : item
            )
            setPosts(newData)
            var response = await axios.patch(
                "https://jsonplaceholder.typicode.com/posts/" + post.id,
                post
            )
            console.log(response.data)
            notify("Post Edited")
        } catch (error) {
            notify(error.toString())
        }
    }

    const deleteAll = () => {
        setPosts([])
    }

    const notify = (message) => toast(message)

    return (
        <PostContext.Provider value={{ posts, deletePost, editPost, deleteAll }}>
            {props.children}
        </PostContext.Provider>
    )
}