import React, {useEffect} from "react";
import {withRouter} from "react-router";
import style from "./goodsContainer.module.sass";
import { css } from '@emotion/core';
// First way to import
import { ClipLoader } from 'react-spinners';
import {connect} from "react-redux";
import GoodsCard from '../../components/goodsCard/goodsCard';
import {getFavouriteGoods, getFilterSettings} from "../../actions/actionCreator";

const GoodsContainer = (props) =>  {

    useEffect(() => {
        props.getFavouritesGoods();
    }, []);

    const loading = () => {

        if(props.isFetching) {
            return (
                <ClipLoader
                    sizeUnit={"px"}
                    size={70}
                    color={'#792c9b'}
                    loading={true}
                />
            );
        }else {
            return (
                props.lazyLoadGoodsArray.map((good, index) => {
                    return <GoodsCard simpleGoodsData={good} key={good.id}/>
                })
            );
        }
    };


    return (
        <div className={style.mainContainer}>
            {loading()}
        </div>
    );

};

const mapStateToProps = state => {
    const { goods, isFetching, error, lazyLoadGoodsArray, settings } = state.goodsReducers;

    return {
        goods, isFetching, error, settings, lazyLoadGoodsArray
    }
};

const mapDispatchToProps = (dispatch) => ({
    setFilterSettings: settings => dispatch(getFilterSettings(settings)),
    getFavouritesGoods: () => dispatch(getFavouriteGoods())
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(GoodsContainer));