import React, {useEffect} from "react";
import {connect} from "react-redux";
import { ClipLoader } from 'react-spinners';
import style from './simpleGoodsPage.module.sass';
import {getSimpleGoodsById, checkAuthUser} from "../../actions/actionCreator";
import Header from "../../components/header/header";
import SimpleGoodsContainer from "../../components/simpleGoodsContainer/simpleGoodsContainer";

const SimpleGoodsPage = (props) => {

    useEffect(() => {
        props.getSimpleGoodsById(props.match.params.id);
        props.checkAuthUser();
    }, [props.match.params.id]);



    if(props.isFetching) {
        return (
            <div className={style.mainLoadingContainer}>
                <div>Загрузка... Подождите пожалуйста</div>
                <ClipLoader
                    sizeUnit={"px"}
                    size={80}
                    color={'#792c9b'}
                />
            </div>
        );
    }
    return(
        <div className={style.mainContainer}>
            <div className={style.container}>
                <Header/>
            </div>
            <div className={style.contentContainer}>
                <div className={style.container}>
                    <SimpleGoodsContainer/>
                </div>
            </div>
        </div>
    )
};

const mapStateToProps = state => {
    const { simpleGoodsData, isFetching, error } = state.simpleGoodsReducer;

    return {
        simpleGoodsData, isFetching, error
    }
};

const mapDispatchToProps = (dispatch) => ({
    getSimpleGoodsById: (id) => dispatch( getSimpleGoodsById(id) ),
    checkAuthUser: () => dispatch(checkAuthUser())
});

export default connect(mapStateToProps, mapDispatchToProps)(SimpleGoodsPage);