import {Container, Grid, useMediaQuery} from "@mui/material";
import {useEffect} from "react";
import Breadcrumb from "../../components/Breadcrumbs";
import {connect} from "react-redux";
import {actionFullAllCategory} from "../../actions/ActionCategory";
import {CategoryAside} from "./CategoryAside";
import {Products} from "./Goods";

const CatalogPage = ({category, actionRootCat}) => {
    const matches = useMediaQuery('(max-width:899px)')
    useEffect(() => {
        if(!category) actionRootCat()
    }, [category])

    return (
        <>
            <Breadcrumb links={['catalog']}/>
            <main
                style={{
                    backgroundColor: "#f3f3f3",
                    padding: matches ? "20px 0" : "50px 0",
                    minHeight: '300px'
                }}
            >
                <Container maxWidth="lg">
                    <Grid container justifyContent='space-between'>
                        {category?.payload && <CategoryAside category={category.payload}/>}
                        <Products/>
                    </Grid>
                </Container>
            </main>
        </>
    )
}
export const CCatalogPage = connect(state => ({category: state.promise['allCategory']}),
    {actionRootCat: actionFullAllCategory})(CatalogPage)