import { Card, Image, Button, Carousel } 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]);
  function onChange (a, b, c) {
    console.log(a, b, c);
  }

  const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79'
  };

  return (
    <Card title={name} style={{ width: 400 }} hoverable>
    {images && images[0] && images[0].url && <Image width={350} src={backendURL + '/' + images[0].url} />}
    <Carousel afterChange={onChange}>
    {(dopImg.length >= 1) && dopImg.map((item) =>

        <div key={item._id} className='additionalImg' style={contentStyle}>
          <Image width={160} height={160} src={backendURL + '/' + item.url} />
        </div>

    )}
    </Carousel>
    <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;
