import React from 'react';
import style from './statusOrder.module.sass';
import {orderStatus} from "../../../../constants/orders";
import {connect} from 'react-redux';
import {updateOrdersAdmin} from "../../../../actions/actionCreator";


const StatusOrders = (props) => {
    const {ordersData} = props;
    const statusForOrder = ordersData[0].orderStatus;

    const setStatusOrdersHandler = (status) => {
        const ordersIdsArray = [];

        ordersData.map(elem => {
            ordersIdsArray.push(elem.id);
        });

        props.updateOrdersAdmin(ordersIdsArray, {
           orderStatus: status
        });
    };


    return (
      <ul className={style.mainContainer}>
        <li
            style={statusForOrder == orderStatus.NOT_CONFIRMED ? {border: '1px solid green'} : {}}
            onClick={() => setStatusOrdersHandler(orderStatus.NOT_CONFIRMED)}
        >
            Not Confirmed
        </li>
        <li
            style={statusForOrder == orderStatus.CONFIRMED ? {border: '1px solid green'} : {}}
            onClick={() => setStatusOrdersHandler(orderStatus.CONFIRMED)}
        >
            Confirmed
        </li>
        <li
            style={statusForOrder == orderStatus.DELIVERED ? {border: '1px solid green'} : {}}
            onClick={() => setStatusOrdersHandler(orderStatus.DELIVERED)}
        >
            Delivered
        </li>
      </ul>
    );
};

const mapStateToProps = state => {
    const {data} = state.adminOrdersReducers;

    return {
        data
    }
};

const mapDispatchToProps = dispatch => ({
    updateOrdersAdmin: (ordersIdsArray, dataForUpdate) => (
        dispatch(updateOrdersAdmin(ordersIdsArray, dataForUpdate))
    )
});

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