import { Input, Card, Button, Space, Image, Row } from 'antd';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { InputUpLoadFile } from '.';
import { backURL } from '../api'; 

const { TextArea } = Input;

const CharacterfGood =({ good, good:{ _id, name, description, images, price }, upLoad, changeGood }) => {    console.log('gooood',good)
    const [ inputIdImg, setInputIdImg] = useState(''); 
    const [ inputName, setInputName ] = useState(name); 
    const [ inputDescrip, setInputDescrip] = useState(description);
    const [ img, setImg ] = useState(''); 
    const [ cost, setCost ] = useState(price);

    useEffect( () => {
      setInputName(name);
      setInputDescrip(description);

      if(images && images[0].url) {
        setImg(images[0].url); 
      }
              
      setCost(price);           

    }, [good])

    useEffect(() => {
      if(upLoad && upLoad.status === 'RESOLVED' ) { console.log('',)
        setImg(upLoad.payload.url);
        setInputIdImg(upLoad.payload._id);  //61e304d8f9be102f49b2aa5c
      }
    }, [upLoad])
    // onChange = ({ target: { value } }) => {
    //   setInputDescrip(value);
    // };

  return (
    <div >
      <div>Название</div>
        <Input value={inputName} onChange={(e) => setInputName(e.target.value)}/>
        <Button type="primary" >Очистить поле</Button>
      <div>Характеристика</div>
        <TextArea
            value={inputDescrip}
            onChange={(e) => setInputDescrip(e.target.value)}
            
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        <Button type="primary" >Очистить поле</Button>
      <div>Цена</div>
        <Row>
          <Input value={cost} onChange={(e) => setCost(e.target.value)}/>
          <Button type="primary" >Очистить поле</Button>
        </Row>
       
        
        <Space size={12} direction="vertical">
          
            {/* <div  className="imgWrapper"> */}
              <div>Фото</div>
            {Object.keys(good).length === 0 ?
              <div style={{height:"150px", width:"150px"}}> </div>
              :
              <Image width={150} height={150} src={`${backURL}/${img}`} style={{ objectFit: 'cover' }}/>}
              <InputUpLoadFile/>
           {/* </div> */}
        </Space>
        <Space size={2}></Space>
        <Button type="primary" block onClick={() => changeGood(inputName, inputDescrip, cost, inputIdImg )}>
          Сохранить изменения
        </Button>     
  </div>
  )
}

const mapStateToProps = ((state) => ({
  upLoad: state.promise?.upLoad
}))
const СhangeOfGood = connect(mapStateToProps)(CharacterfGood);

export default СhangeOfGood;

//{images && images[0] && images[0].url && (src={backURL + '/' + `${img || images[0].url }`})}