import { connect } from 'react-redux';
import { Card, Row, Col } from 'antd';
import { CPromisePreloader } from '../reducer';
import { Redirect } from 'react-router-dom';

const Orders = ({ allOrders, status, arrUsers }) => {
  return (
    <CPromisePreloader myOrders='myOrders'>
      {arrUsers?.acl?.includes('user')
        ? <Card title="История заказов">

      { allOrders.length === 0 && status.status === 'RESOLVED' && <Card>Вы не совершали покупки</Card>}
        { allOrders.map((item, index) =>
            <Card key={index} type="inner" title={`Заказ №  ${index + 1}`} style={{ marginTop: 16 }} >
              <Row>
                <Col span={9}>Название</Col>
                <Col span={5}>Количество</Col>
                <Col span={4}>Цена</Col>
                <Col span={4}>Сумма</Col>
              </Row>
              {item.orderGoods.map((item) =>
                <Card key={item._id}>
                  <Row>
                    <Col span={9}>{item.good.name}</Col>
                    <Col span={5}>{`${item.count} шт.`}</Col>
                    <Col span={5}>{`${item.price} грн.`}</Col>
                    <Col span={5}>{`${item.total}`}</Col>
                  </Row>
                </Card>
              )}
        </Card>
        )}
      </Card>
        : <Redirect to='/'/> }
    </CPromisePreloader>
  );
};

const mapStateToProps = (state) => (
  {
    allOrders: state.promise.myOrders?.payload || [],
    status: state.promise?.myOrders,
    arrUsers: state.auth.payload?.sub || []
  }
);

const ListOrders = connect(mapStateToProps)(Orders);

export default ListOrders;
