function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { useEffect, useRef } from 'react';
import { useStore, useStore2, useTools } from '../../hooks';
import useDebouncedCallback from '../../useDebounce';
import { getValueByPath, isCheckBoxType, isObjType } from '../../utils';
import ErrorMessage from './ErrorMessage';
import Extra from './Extra';
import FieldTitle from './Title';
import ExtendedWidget from './ExtendedWidget'; // TODO: 之后不要直接用get，收口到一个内部方法getValue，便于全局 ctrl + f 查找

var RenderField = function RenderField(props) {
  var $id = props.$id,
      dataIndex = props.dataIndex,
      dataPath = props.dataPath,
      _value = props._value,
      dependValues = props.dependValues,
      _schema = props._schema,
      labelClass = props.labelClass,
      labelStyle = props.labelStyle,
      _contentClass = props.contentClass,
      children = props.children,
      _props$errorFields = props.errorFields,
      errorFields = _props$errorFields === void 0 ? [] : _props$errorFields,
      hideTitle = props.hideTitle,
      displayType = props.displayType;

  var _useStore = useStore(),
      formData = _useStore.formData;

  var _useStore2 = useStore2(),
      debounceInput = _useStore2.debounceInput,
      readOnly = _useStore2.readOnly,
      disabled = _useStore2.disabled,
      showValidate = _useStore2.showValidate;

  var _useTools = useTools(),
      onValuesChange = _useTools.onValuesChange,
      onItemChange = _useTools.onItemChange,
      setEditing = _useTools.setEditing,
      touchKey = _useTools.touchKey;

  var formDataRef = useRef();
  formDataRef.current = formData; // console.log('<renderField>', $id);

  var errObj = errorFields.find(function (err) {
    return err.name === dataPath;
  });
  var errorMessage = errObj && errObj.error; // 是一个list

  var hasError = Array.isArray(errorMessage) && errorMessage.length > 0; // 补上这个class，会自动让下面所有的展示ui变红！

  var contentClass = hasError && showValidate ? _contentClass + ' ant-form-item-has-error' : _contentClass;
  var contentStyle = {};
  var debouncedSetEditing = useDebouncedCallback(setEditing, 350);

  var _readOnly = readOnly !== undefined ? readOnly : _schema.readOnly;

  var _disabled = disabled !== undefined ? disabled : _schema.disabled; // TODO: 优化一下，只有touch还是false的时候，setTouched


  var onChange = function onChange(value) {
    // 动过的key，算被touch了, 这里之后要考虑动的来源
    touchKey(dataPath); // 开始编辑，节流

    if (debounceInput) {
      setEditing(true);
      debouncedSetEditing(false);
    }

    if (typeof dataPath === 'string') {
      onItemChange(dataPath, value);
    } // 先不暴露给外部，这个api


    if (typeof onValuesChange === 'function') {
      onValuesChange(_defineProperty({}, dataPath, value), formDataRef.current);
    }
  };

  var titleProps = {
    labelClass: labelClass,
    labelStyle: labelStyle,
    schema: _schema,
    displayType: displayType
  };
  var messageProps = {
    message: errorMessage,
    schema: _schema,
    displayType: displayType,
    softHidden: displayType === 'inline',
    // 这个是如果没有校验信息时，展示与否
    hardHidden: showValidate === false || _readOnly === true // 这个是强制的展示与否

  };
  var placeholderTitleProps = {
    className: labelClass,
    style: labelStyle
  };

  var _showTitle = !hideTitle && typeof _schema.title === 'string'; // TODO: 这块最好能判断上一层是list1，


  if (hideTitle && _schema.title) {
    _schema.placeholder = _schema.placeholder || _schema.title;
  }

  var _getValue = function _getValue(path) {
    return getValueByPath(formData, path);
  };

  var widgetProps = {
    $id: $id,
    schema: _schema,
    readOnly: _readOnly,
    disabled: _disabled,
    onChange: onChange,
    getValue: _getValue,
    formData: formData,
    value: _value,
    dependValues: dependValues,
    onItemChange: onItemChange,
    dataIndex: dataIndex,
    dataPath: dataPath,
    children: children
  }; // if (_schema && _schema.default !== undefined) {
  //   widgetProps.value = _schema.default;
  // }
  // checkbox必须单独处理，布局太不同了

  if (isCheckBoxType(_schema, _readOnly)) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && /*#__PURE__*/React.createElement("div", placeholderTitleProps), /*#__PURE__*/React.createElement("div", {
      className: contentClass,
      style: contentStyle
    }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps)));
  }

  var titleElement = /*#__PURE__*/React.createElement(FieldTitle, titleProps);

  if (isObjType(_schema)) {
    titleElement = /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex'
      }
    }, titleElement, /*#__PURE__*/React.createElement(ErrorMessage, messageProps));
    return /*#__PURE__*/React.createElement("div", {
      className: contentClass,
      style: contentStyle
    }, /*#__PURE__*/React.createElement(ExtendedWidget, _extends({}, widgetProps, {
      message: errorMessage,
      title: _showTitle ? titleElement : undefined
    })), /*#__PURE__*/React.createElement(Extra, widgetProps));
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && titleElement, /*#__PURE__*/React.createElement("div", {
    className: "".concat(contentClass, " ").concat(hideTitle ? 'fr-content-no-title' : ''),
    style: contentStyle
  }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps)));
};

export default RenderField;