import { List, ListItemButton, ListItemText} from "@mui/material"
import { useEffect, useState } from "react"
import { Link } from "react-router-dom"
import { gqlRootCats } from "./actions/actions"
import ListItem from '@mui/material/ListItem';
import { useGetCategoriesQuery } from '../store/categoriesApi'

// const CategoryMenu = () => {
//     const [categories, setCategories] = useState(null)
//     const {data: payload = null/*{data: {CategoryFind: payload = []}}*/} = useGetCategoriesQuery()
//     console.log(payload)
//     if(payload) setCategories(Object.values(payload.data)[0])

//     // useEffect(
//     //     () => {
//     //         gqlRootCats().then(setCategories)
//     //     }
//     //     , []
//     // )
//     let categoryRender = (category) => {
//         if (category) {
//             return (
//                 <ListItem key={category._id} disablePadding>
//                     <ListItemButton component={Link} to={`/category/${category._id}/${category.name}`}>
//                         <ListItemText primary={category.name} />
//                     </ListItemButton>
//                 </ListItem>
//             )
//         }
//         else return ""
//     }

//     return(
//         <>
//         <nav className="categoryMenu">
//         <List>
//             {categories ? categories.map(categoryRender) : ""}
//         </List>
//         </nav>
//         </>
//     )
// }

const CategoryMenu = () => {
    const {data: payload = null} = useGetCategoriesQuery()
    const categories = payload ? Object.values(payload)[0] : null


    let categoryRender = (category) => {
        if (category) {
            return (
                <ListItem key={category._id} disablePadding>
                    <ListItemButton component={Link} to={`/category/${category._id}/${category.name}`}>
                        <ListItemText primary={category.name} />
                    </ListItemButton>
                </ListItem>
            )
        }
        else return ""
    }

    return(
        <>
        <nav className="categoryMenu">
        <List>
            {categories ? categories.map(categoryRender) : ""}
        </List>
        </nav>
        </>
    )
}

export default CategoryMenu