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

const { TextArea } = Input;

const CharacterfGood = ({
  good,
  good: { _id, name, description, images, price },
  upLoad, changeGood, number, changeIndexGoodInSer
}) => {
  const [inputIdImg, setInputIdImg] = useState('');
  const [inputName, setInputName] = useState(name);
  const [inputDescrip, setInputDescrip] = useState(description);
  const [imag, setImag] = useState('');
  const [cost, setCost] = useState(price);
  const [inputNumber, setInputNumber] = useState(number);

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

    if (images && images.length >= 1 && images[0].url) {
      setImag(images[0].url);
      setInputIdImg(images[0]._id);
    }

    if (Object.keys(good).length === 0) {
      setImag('');
      setInputIdImg('');
    }
    if (images && images.length >= 1 && !images[0].url) {
      setImag('');
      setInputIdImg('');
    }

    setCost(price);
    setInputNumber(number);
  }, [good]); console.log('good', good);

  useEffect(() => {
    if (upLoad && upLoad.status === 'RESOLVED') {
      setImag(upLoad.payload.url); console.log('39', imag);
      setInputIdImg(upLoad.payload._id);
    }
  }, [upLoad]);

  // onChange = ({ target: { value } }) => {
  //   setInputDescrip(value);
  // };

  const clearInput = () => {
    setInputName('');
    setInputDescrip('');
    setCost('');
    setImag('');
    setInputIdImg('');
  };

  const saveChange = () => {
    let goodImages = [{ _id: inputIdImg }];

    if (good.images && good.images.length > 1) {
      goodImages = [...good.images].map((state) => ({ _id: state._id }));
      goodImages.shift();
      goodImages.unshift({ _id: inputIdImg });
    }

    changeGood(inputName, inputDescrip, cost, goodImages);
    changeIndexGoodInSer(inputNumber);
    clearInput();
  };
  console.log('inputIdImg', inputIdImg);
  console.log('good', good); console.log('iinputIdImg.length === 0', inputIdImg.length === 0);
  console.log('Object.keys(good).length === 0', Object.keys(good).length === 0);
  console.log('good.images == null', good.images == null);

  return (
    <div >
        <div>№ в категории</div>
          <Input value={inputNumber} onChange={(e) => setInputNumber(e.target.value)}/>
          <Button type="primary" onClick={() => setInputNumber('')}>Очистить поле</Button>

      <div>Название</div>
        <Input value={inputName} onChange={(e) => setInputName(e.target.value)}/>
        <Button type="primary" onClick={() => setInputName('')}>Очистить поле</Button>
      <div>Характеристика</div>
        <TextArea
            value={inputDescrip}
            onChange={(e) => setInputDescrip(e.target.value)}

            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        <Button type="primary" onClick={() => setInputDescrip('')}>Очистить поле</Button>
      <div>Цена</div>
        <Row>
          <Input value={cost} onChange={(e) => setCost(e.target.value)}/>
          <Button type="primary" onClick={() => setCost('')}>Очистить поле</Button>
        </Row>

        <Space size={12} direction="vertical">

              <div>Фото основное</div>
            {(Object.keys(good).length === 0 && good.images == null) || inputIdImg.length === 0
              ? <div style={{ height: '150px', width: '150px' }}> </div>
              : <Image width={150} height={150} src={`${backURL}/${imag}`} style={{ objectFit: 'cover' }}/>}
              <InputUpLoadFile/>
           {/* </div> */}
        </Space>
        <Space size={2}></Space>
        <Button type="primary" block onClick={saveChange}>
          Сохранить изменения
        </Button>
        <div> Загрузить дополнительные фото</div>
        <AdditionalImages imag={imag} _id={_id}/>
  </div>
  );
};

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

export default СhangeOfGood;
