import { connect } from 'react-redux';
import { useState, useEffect } from 'react';
import { GoodCardCharacteristic, SortableComponent  } from './index';
import { Card } from 'antd';
import { actionClearFirstImg, actionChangeArrInGood } from '../action';


const CartGoodAdmin = ({good:{_id, images}, upLoad, clearUpLoad, onChangeArrInGood}) => {
  const [arrImages, setArrImages] = useState(images);  
  const [upl, setUpl] = useState(upLoad);

  // useEffect(() => {
  //    setArrImages(images);                       
  // }, [images])
    
  // useEffect(() => {
  //   setUpl(upLoad);
  // }, [upLoad])
    console.log('upLoad===========', upLoad)
   return (
    <Card>
      <GoodCardCharacteristic/>
      <div style={{textAlign:"center"}}>
        <strong >Фото можно поменять местами</strong>
      </div>
      <div>
      <SortableComponent images={images} idGood={_id} upLoad={upLoad} clearUpLoad={clearUpLoad} onChangeArrInGood={onChangeArrInGood} />
      </div>
    </Card>
  )
}

const mapStateToProps = (state) => ({
  good: state.promise.goodById?.payload || [],  
  upLoad: state.upLoad.upLoad?.payload || '',
});

const mapDispatchToProps = {
  clearUpLoad: actionClearFirstImg,
  onChangeArrInGood: actionChangeArrInGood,
};

const CCartGoodAdmin = connect(mapStateToProps, mapDispatchToProps)(CartGoodAdmin);

export default CCartGoodAdmin;