import { Card, Button, Image, Space, Row , Col} from 'antd';
import { defaultIconPrefixCls } from 'antd/lib/config-provider';
import { actionCartAdd,  actionCartRemove, actionCartChange, actionCartClear, actionCartMin, actionOrder} from '../action';
import { connect } from 'react-redux';
import {PlusSquareTwoTone, MinusSquareTwoTone, CloseSquareTwoTone, CheckSquareTwoTone, RestTwoTone} from '@ant-design/icons';
import { useEffect, useState } from 'react';




const backendURL = "http://shop-roles.asmer.fs.a-level.com.ua" ;

const CartBasket = ({good, good:{name, price, images}, count, clickButton:{cartMin, cartChange, cartRemove, cartAdd}}) => {
  
  return (
   

    <Card
      style={{ marginTop: 16 }}
      type="inner"
      title={`${name}`}
    >
    <Space>
      <Row>
        {images && images[0] && images[0].url &&<Image  width={100} height={70} src={backendURL + '/' + images[0].url} />}
        <Space align="center">
        <Button size ='large' icon={<PlusSquareTwoTone />} onClick={()=>cartAdd(good)}></Button>
        <Button size ='large' icon={<MinusSquareTwoTone />} onClick={()=>cartMin(good)}></Button>
        <Button size ='large' icon={<CloseSquareTwoTone />} onClick={()=>cartRemove(good)}></Button>
        </Space>

        

        <Space align="center">
          
            <p>{`Цена       ${price}  грн.`}</p>
            <p>{`Количество ${count}  шт.`}</p>
            <p>{`Всего:     ${price * count}  грн.`}</p>
          
        </Space>
      </Row>
        


      </Space>


    </Card>
  
  )
}


const GoodsInBasket = ({cart = {}, orderPayload, cartMin, cartClear, cartChange, cartRemove, cartAdd, order, auth}) => {
  const goods = Object.values(cart); console.log("csrt", goods);
  const costOrder= goods.reduce((acumm, item) => acumm + item.good.price * item.count, 0 ); 
  const [messageForOrder, setmessageForOrder] = useState(false);

  useEffect (() => {

    if((auth).length !== 0) { 
      setmessageForOrder(!messageForOrder);
    } 
  }
  ,[auth]) 
  
  const oderPlusclearOrder = () => { 
    order();

    cartClear();
    
  }

  return (
    <Card title="Ваш заказ">
     <Row>
     <p>{`Всего:  ${costOrder} грн.`}</p>
     <Space align="center">
      {messageForOrder ? 
        < >
          <Button size ='large' icon={<CheckSquareTwoTone />} onClick={()=> oderPlusclearOrder() }>Оформить</Button> 
          <Button size ='large' icon={<RestTwoTone />} onClick={()=> cartClear()} >Очистить</Button> 
        </>  
       : <p style={{color:'red'}}> Для оформления заказа нужно авторизоваться</p>
      }
     </Space> 
    </Row>

       {goods.map((item) => <CartBasket key={item.good._id} {...item} clickButton={{cartMin, cartChange, cartRemove, cartAdd}}/>)}
    </Card>
   
  )

}

const mapStateToProps = (state) => ({
  cart: state?.cart,
  orderPayload: state.promise.order?.payload || {},
  auth: state.auth?.token || '',
});
const mapDispatchToProps = {
  cartAdd: actionCartAdd, 
  cartRemove: actionCartRemove, 
  cartChange: actionCartChange, 
  cartClear: actionCartClear, 
  cartMin: actionCartMin, 
  order: actionOrder,
}



const PageBasket = connect(mapStateToProps, mapDispatchToProps)(GoodsInBasket);

export default PageBasket;