import React, {useState} from 'react';
import style from './orderSimpleElement.module.sass';
import {connect} from 'react-redux';
import ModalOrder from '../../../../../modals/modalOrder/modalOrder';
import {ordersStatusDescription} from "../../../../../../constants/orders";

const OrderSimpleElement = (props) => {
    const {packId} = props;
    const data = props.data.packages;
    const {name, surname, phone, city, street, home, apartment, userId} = data[packId][0];
    const [isOpenModal, setStatusModal] = useState(false);
    const statusOrder = data[packId][0].orderStatus;



    return (
        <div className={style.mainContainer}>
            <ul>
                <li>Идентификатор заказа: {packId}</li>
                <li>ФИО заказчика: {name} {surname}</li>
                <li>Номер: {phone}</li>
                <li>Город: {city}</li>
                <li>Улица: {street}</li>
                <li>Номер дома: {home}</li>
                <li>Номер квартиры: {apartment}</li>
                <li>{userId ? userId : "Пользователь не зарегистрирован"}</li>
            </ul>
            <div className={style.statusContainer}>
                <h2 onClick={() => setStatusModal(true)}>Инф</h2>
                <h2>{ordersStatusDescription[statusOrder]}</h2>
            </div>
            {
                isOpenModal && (
                    <ModalOrder
                      isOpen={isOpenModal}
                      onRequestClose={() => setStatusModal(false)}
                      packId={packId}
                  />
                )
            }
        </div>
    )
};

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

    return {
        data
    }
};

export default connect(mapStateToProps)(OrderSimpleElement);