import Breadcrumb from "../components/Breadcrumbs";
import {
Accordion,
AccordionDetails,
AccordionSummary, Box, Button,
Card, CardActionArea, CardActions, CardContent, CardMedia,
Container, Divider, FormControl,
Grid, MenuItem, Select,
Typography,
useMediaQuery
} from "@mui/material";
import {connect} from "react-redux";
import {actionFullCatById, actionFullRootCats} from "../actions/ActionCategory";
import Link from "react-router-dom/es/Link";
import Route from "react-router-dom/es/Route";
import Switch from "react-router-dom/es/Switch";
import {useEffect, useState} from "react";
import {backURL} from "../actions/PathDB";
import {actionCardRemove, actionCartAdd} from "../reducers/CartReducer";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import {Pagination} from "@mui/material";
import {actionWishListAdd, actionWishListRemove} from "../reducers/WishListReducer";
import FavoriteIcon from '@mui/icons-material/Favorite';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import imgNotFound from "../img/catalog/imgNotFound.png";
import {NotFoundBlock} from "../components/NotFoundBlock";
const CategoryItem = ({object: {_id, name, subCategories}={}}) => {
const [expanded, setExpanded] = useState(false);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
return (
<>
{subCategories === null || !subCategories ?
{name}
:
}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
{name}
{subCategories && Object.values(subCategories).map(item =>
)}
}
>
)
}
const CategoryAside = ({category}) => {
return (
PRODUCT CATEGORIES
{category && Object.values(category).map(item =>
)}
)
}
const GoodCard = ({good:{_id, name, description, price, images}={}, wishlist={}, cart={}, onCartAdd, onWishListAdd, onCartRemove, onWishListRemove}) => {
return (
{name.length > 30 ? name.split(' ').splice(0, 6).join(' ') : name}
{description.length > 60 ?
'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' :
description
}
$ {parseFloat(price).toFixed(2)}
)
}
const CGoodCard = connect(state => ({wishlist: state.wishlist, cart: state.cart}),
{onCartAdd: actionCartAdd, onWishListAdd: actionWishListAdd, onCartRemove: actionCardRemove, onWishListRemove: actionWishListRemove})(GoodCard)
const Goods = ({_id='5dc49f4d5df9d670df48cc64', category={}}) => {
const itemsPerPage = 6
const [page, setPage] = useState(1)
const [count, setCount] = useState(1)
const [goods, setGoods] = useState([])
const [sort, setSort] = useState(0)
const sortDefault = () => {
setGoods([goods[0].sort((a, b) => a['name'] > b['name'] ? 1 : -1)])
}
const sortLatest = () => {
setGoods([goods[0].sort((a, b) => b['createdAt'] > a['createdAt'] ? 1 : -1)])
}
const sortLowToHigh = () => {
setGoods([goods[0].sort((a, b) => a['price'] > b['price'] ? 1 : -1)])
}
const sortHighToLow = () => {
setGoods([goods[0].sort((a, b) => b['price'] > a['price'] ? 1 : -1)])
}
const handleChange = (event, value) => {
setPage(value);
}
const handleChangeSelect = (event) => {
setSort(event.target.value);
if (event.target.value === 0) sortDefault()
else if (event.target.value === 1) sortLatest()
else if (event.target.value === 2) sortLowToHigh()
else if (event.target.value === 3) sortHighToLow()
}
useEffect(() => {
let arr = (Object.values(category) || []).map(item => {
if (item['_id'] === _id) {
if (Array.isArray(item?.goods) && item?.goods.length > 0) {
setCount(Math.ceil(item.goods.length / itemsPerPage))
return item.goods
}
}
else if(Array.isArray(item['subCategories'])) {
let arr = item['subCategories'].map(subItem => {
if (subItem['_id'] === _id) {
if (Array.isArray(subItem?.goods) && subItem?.goods.length > 0) {
setCount(Math.ceil(subItem.goods.length / itemsPerPage))
return subItem.goods
}
}
else if(Array.isArray(subItem['subCategories'])) {
let arr = subItem['subCategories'].map(subSubItem => {
if (subSubItem['_id'] === _id) {
if (Array.isArray(subSubItem?.goods && subSubItem?.goods.length > 0)) {
setCount(Math.ceil(subSubItem.goods.length / itemsPerPage))
return subSubItem.goods
}
}
else {
return 0
}
}).filter(item => item)
return arr.length > 0 ? [...arr[0]] : 0
}
else {
return 0
}
}).filter(item => item)
return arr.length > 0 ? [...arr[0]] : 0
}
else {
return 0
}
}).filter(item => item)
setGoods(arr)
}, [_id, category])
return (
<>
{(goods.length > 0 ?
SHOWING {goods[0].length > itemsPerPage ? `${((page-1) * itemsPerPage)+1}-${page * itemsPerPage > goods[0].length ? goods[0].length : page * itemsPerPage}` : goods[0].length} OF {goods[0].length} RESULTS
{[...goods[0]].slice((page - 1) * itemsPerPage, page * itemsPerPage)
.map(good => )}
: )
}
>
)
}
const CGoods = connect(state => ({category: state.category}))(Goods)
const BlockGood = ({match:{params:{_id}}, getData}) => {
useEffect(() => {
getData(_id)
},[_id, getData])
return(
)
}
const CBlockGood= connect(null, {getData: actionFullCatById})(BlockGood)
const Products = () => {
return (
)
}
const CatalogPage = ({category={}, actionRootCat}) => {
const matches = useMediaQuery('(max-width:899px)')
if(Object.entries(category).length === 0) actionRootCat()
return (
<>
>
)
}
const CCatalogPage = connect(state => ({category: state.category}), {actionRootCat: actionFullRootCats})(CatalogPage)
export default CCatalogPage
//TODO MOBILE VERSION