import React, {useState} from 'react';
import style from './modalOrder.module.sass';
import Modal from 'react-modal';
import {connect} from 'react-redux';
import GoodsSimpleElement from '../../../components/userAndAdminCabinet/adminCabinet/pages/orders/goodsSimpleElement/goodsSimpleElement';
import DynamicGoodsSearcher from '../../inputs/dynamicSearchGoods/dynamicSearchGoods';
import StatusOrders from './statusOrders/statusOrders';
import {dynamicSearchGoodsConstants} from "../../../constants/typesComponents";

Modal.setAppElement('#root');

const ModalOrder = (props) => {
    const {isOpen, onRequestClose, packId} = props;
    const ordersData = props.data[packId];

    return(
        <>
            <Modal
                isOpen={isOpen}
                onRequestClose={onRequestClose}
                overlayClassName={style.overlay}
                className={style.modalMainContainer}
                shouldCloseOnOverlayClick={false}
            >
                <div className={style.mainContainer}>
                    <div className={style.orderGoodsContainer}>
                        {
                            ordersData.map(goodData => (
                                <GoodsSimpleElement
                                    simpleGoodsData={goodData}
                                />
                            ))
                        }
                    </div>
                    <div className={style.controls}>
                        <DynamicGoodsSearcher
                            packId={packId}
                            type={dynamicSearchGoodsConstants.ORDERS}
                        />
                        <StatusOrders
                            ordersData={ordersData}
                        />
                    </div>
                </div>
            </Modal>
        </>
    );
};

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

    return {
        data
    }
};

export default connect(mapStateToProps)(ModalOrder);