import React, {useEffect} from 'react';
import style from './orders.module.sass';
import {connect} from 'react-redux';
import {getAllOrders} from "../../../../../actions/actionCreator";
import OrderSimpleElement from './orderSimpleElement/orderSimpleElement';
import OrdersSearcher from '../../../../inputs/ordersSearcher/ordersSearcher';

const Orders = (props) => {

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

    const paginationElements = () => {
        const paginationBlockArray = [];

        for(let i = 0; i < Math.ceil(props.data.count / 10); i++) {
            paginationBlockArray.push(i + 1);
        }


        return (
            paginationBlockArray.map((elem, index) => (
                <div
                    className={
                        index === props.numberPage ? style.changedPaginationElement : style.paginationElement
                    }
                    key={index}
                    onClick={() => props.getAllOrders(index * 10)}
                >
                    {elem}
                </div>
            ))
        )

    };


    return(
      <div className={style.mainContainer}>
          <OrdersSearcher/>
          {
              props.data.packages && Object.keys(props.data.packages).map(pack => (
                     <OrderSimpleElement
                         packId={pack}
                     />
              ))
          }
          <div className={style.paginationContainer}>
              {paginationElements()}
          </div>
      </div>
    );
};
const mapStateToProps = state => {
    const {data, numberPage} = state.adminOrdersReducers;

    return {
        data, numberPage
    }
};

const mapDispatchToProps = dispatch => ({
    getAllOrders: (offset) => dispatch(getAllOrders(offset))
});

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