redux

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

/** ACTIONS */
import { getCategories, getProductByFilters } from 'store/actions'

/** Layout */
import { Content, Loading } from 'features/layouts'

/** Component */
import CheckBox from './components/Categories/CheckBox'
import Card from 'features/components/Partials/Card'

/** Fixed  price*/
import { price } from './FixedPrice'
import RadioBox from './components/Price/RadioBox'

const Shop = ({
    filterProduct,
    getCategories,
    getProductByFilters,
    filterProduct: { filters, more },
    categoriesShop: { allCategories, loading },
}) => {
    /** état */
    const [myFilters, setMyFilters] = useState({
        filters: { category: [], price: [] },
    })
    const [limit, setLimit] = useState(5)
    const [skip, setSkip] = useState(0)
    let [filteredResults, setFilteredResults] = useState([])
    const [size, setSize] = useState(0)

    /** Charge les categories*/
    const loadApiCategories = () => {
        setTimeout(() => getCategories(), 1000)
    }

    /** Permet le chargement des résultat */
    const loadFiltersResults = async newFilters => {
        getProductByFilters(skip, limit, newFilters)
        setFilteredResults([filters])
        setSize(size)
        setSkip(0)
    }

    // récupère les données en api
    useEffect(
        () => {
            loadApiCategories()

            // Précharge les données Api
            loadFiltersResults()
        },
        [getCategories]
    )

    /** Permet le chargement du reste des produits */
    const loadMoreProducts = async () => {
        let toSkip = skip + limit
         getProductByFilters(toSkip, limit, myFilters)
        setFilteredResults(filters)
        setSize(size)
        setSkip(toSkip)
        loadFiltersResults(filters)

        console.log(g)
    }

    const buttonLoadMore = () => {
        return (
            filters.size &&
            filters.size >= limit && (
                <button onClick={loadMoreProducts} className="btn btn-dark mb-5">
                    Charger plus de produits
                </button>
            )
        )
    }

    /** Permet d'afficher un tableau de prix */
    const handlePrice = value => {
        const data = price
        let array = []

        for (let key in data) {
            if (data[key]._id === parseInt(value)) {
                array = data[key].array
            }
        }

        return array
    }

    /** Permettra de filtrer par prix  catégorie */
    const handleFilter = (filters, filterBy) => {
        //console.log(filters, filterBy)
        const newFilters = { ...myFilters }
        newFilters.filters[filterBy] = filters

        if (filterBy === 'price') {
            // extrait le tableau de valeur
            let priceValue = handlePrice(filters)
            newFilters.filters[filterBy] = priceValue
        }

        loadFiltersResults(myFilters.filters)
        setMyFilters(newFilters)
    }

    return loading ? (
        <Loading />
    ) : (
        <Content
            title="Magasin"
            description="Chercher et trouver le produits de votre choix 😁."
            className="container"
        >
            <div className="row">
                <div className="col-md-3 ">
                    <h2 className="text-muted"> Filtres</h2>
                    <hr />
                    <h4 className="text-muted"> Categories:</h4>
                    <ul>
                        <CheckBox
                            allCategories={allCategories}
                            handleFilter={filters => handleFilter(filters, 'category')}
                        />
                    </ul>

                    <h4 className="text-muted"> Prix:</h4>

                    <RadioBox
                        price={price}
                        handleFilter={filters => handleFilter(filters, 'price')}
                    />
                </div>
                <div className="col-md-9">
                    <h2 className="text-muted"> Filtrer par prix:</h2>
                    <hr />
                    <div className="row">
                        {filters.products.map((product, index) => (
                            <Card key={index} product={product} />
                        ))}
                    </div>

                    {buttonLoadMore()}
                </div>
            </div>
        </Content>
    )
}

Shop.propTypes = {
    categoriesShop: PropTypes.object.isRequired,
    filterProduct: PropTypes.object.isRequired,
    getCategories: PropTypes.func.isRequired,
    getProductByFilters: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
    categoriesShop: state.categoriesShop,
    filterProduct: state.filterProduct,
})

export default connect(mapStateToProps, { getCategories, getProductByFilters })(Shop)