import { Card, Image, Button, Space  } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { actionCartAdd } from '../action';

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

const Good = ({good: {name, images, description, price, _id}, onAdd}) => { 
  const [dopImg, setDopImg] = useState([]);
  
  useEffect(() => {
    if (images && images.length > 1) {         
      const newImages = [...images]; 
      newImages.shift();                    
      setDopImg(newImages);
    }
  }, [images])
                                             
  return (
    <Card title={name} style={{ width: 400}} hoverable>
    {images && images[0] && images[0].url && <Image width={350} src={backendURL + '/' + images[0].url} />}
    {(dopImg.length >= 1) &&  dopImg.map((item) =>
      
        <div key={item._id} className='additionalImg'> 
          <Image width={110} height={110} src={backendURL + '/' + item.url} />
        </div>
     
        )}
    <p>{description}</p>
    <p>{price} грн</p>
    <Button onClick={() => onAdd({_id, name, price, images})}>Купить</Button>
  </Card>
  )
}

const mapStateToProps = state => ({good: state.promise.goodById?.payload || {}})

const GoodCardCharacteristic = connect(mapStateToProps, {onAdd: actionCartAdd})(Good);

export default GoodCardCharacteristic;