import React from 'react';
import './CategoryMenu.scss'
import Skeleton from '@mui/material/Skeleton';
import { useGetCategoriesQuery } from '../../api/api';
import { useSelector } from 'react-redux';
import ItemList from '../ItemList';
import List from '@mui/material/List';

 const CategoryMenu = () => {
  const { data, error, isFetching } = useGetCategoriesQuery();
  const admin = useSelector(state => state.auth?.payload?.sub?.acl?.includes('admin'));
  const adminMenu = ['Categories', 'Users', 'Goods', 'Orders'];

  return (
    <aside className='aside'>
      {admin ?
        <List>
          {adminMenu.map((category, index ) =>
            <ItemList key={index} url={`/admin/${category.toLowerCase()}`} text={category} />)}
        </List>
        :
        (isFetching ? Array(10).fill(1).map((_, index) => <Skeleton key={index} className='skeleton' />) :
          <List>
            {data.CategoryFind.map(category =>
              <ItemList key={category._id} url={`/${category.name}/${category._id}`} text={category.name} />)}
          </List>)}

    </aside>
  )
}

export default CategoryMenu;