import React, { useState, useCallback, useEffect } from 'react';
import IceContainer from '@icedesign/container';
import {
  Input,
  Button,
  Message,
  NumberPicker,
  DatePicker,
  Radio,
  Select,
  Checkbox
} from '@alifd/next';
import classNames from 'classnames';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError
} from '@icedesign/form-binder';
import styles from './formItem.module.scss';
const { Option } = Select;
import inputType from './inputType';
export default function ProductSalePropertyFormItem({ propertyItem, events }) {
  const {
    propertyValueInputType,
    propertyKeyText,
    propertyKeyId
    // propertyValueVOList
  } = propertyItem;
  const [inputValue, setInputValue] = useState();
  const [propertyValueVOList, setPropertyValueVOList] = useState([
    ...propertyItem.propertyValueVOList
  ]);
  let initData;
  const values = [];
  propertyValueVOList.map(valueVO => {
    if (valueVO.checked) {
      values.push(valueVO.value);
    }
  });
  if (values.length > 0) {
    initData = values;
  }
  // const [initData, setInitData] = useState();

  useEffect(() => {
    // const values = [];
    // propertyItem.propertyValueVOList.map(valueVO => {
    //   if (valueVO.checked) {
    //     values.push(valueVO.value);
    //   }
    // });
    // if (values.length > 0) {
    //   // setInitData(values);
    // }
    setPropertyValueVOList(propertyItem.propertyValueVOList);

    // console.log('initData', initData);
  }, [propertyItem]);
  const inputChange = e => {
    // console.log(value);
    setInputValue(e.target.value);
    // events.onAdd(e.target.value);
  };
  const onAdd = e => {
    // console.log(value);
    // setInputValue(e.target.value);
    events.onAdd(inputValue);
  };
  const onPropertyCheckChange = (e, propertyKeyId) => {
    // console.log(e, propertyKeyId);
    events.checkAndRenderSkuTable(e, propertyKeyId);
  };
  // console.log('propertyValueVOList', propertyValueVOList);
  if (
    (propertyValueInputType == 7 || propertyValueInputType == 3) &&
    (!initData || Array.isArray(initData))
  ) {
    return (
      <div className={styles.propLine}>
        <Checkbox.Group
          itemDirection="hoz"
          onChange={e => onPropertyCheckChange(e, propertyKeyId)}
          defaultValue={initData}
        >
          {propertyValueVOList.map(propertyOption => {
            return (
              <Checkbox
                value={propertyOption.propertyValueId}
                key={propertyOption.propertyValueId}
                className={styles.hCheckboxItem}
              >
                {propertyOption.propertyValueText}
              </Checkbox>
            );
          })}
        </Checkbox.Group>
      </div>
    );
  }
  if (propertyValueInputType == 1 && initData.length) {
    return (
      <div className={styles.line}>
        <Input
          placeholder={propertyKeyText}
          onBlur={inputChange}
          className={styles.goodsName}
        />
        <Button onClick={onAdd}>添加</Button>
        <div className={styles.propLine}>
          <Checkbox.Group
            itemDirection="hoz"
            defaultValue={initData}
            onChange={e => onPropertyCheckChange(e, propertyKeyId)}
          >
            {propertyValueVOList.map(item => {
              return (
                <Checkbox
                  className={styles.hCheckboxItem}
                  value={item.propertyValueId}
                  key={item.uniqueId}
                >
                  {item.propertyValueText}
                </Checkbox>
              );
            })}
          </Checkbox.Group>
        </div>
      </div>
    );
  }
  return null;
}