import { connect } from "react-redux";
import { Card, Row, Col } from 'antd';
import { actionMyOrders } from "../action";
import { useEffect, useState } from "react";

const Orders = ({allOrders, status}) => {
  const [ord, setOrd] = useState(allOrders); 

  useEffect( () => {

    setOrd(allOrders);

  }, [allOrders])

  return (
    <Card title="История заказов">

    { ord.length0 === 0 && status['status'] &&  <Card>Вы не совершали покупки</Card>}
       { ord.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>
  )
}

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



const ListOrders = connect(mapStateToProps)(Orders);

export default ListOrders;