import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { forwardRef, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import useGeneratedId from '../hooks/useGeneratedId';
import Box from '../Box';
import { SuperFieldContext } from './contexts'; // Works only for native inputs where the value is primitive value

var SuperField = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var idProp = _ref.id,
      hasError = _ref.hasError,
      disabled = _ref.disabled,
      readOnly = _ref.readOnly,
      children = _ref.children;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isFocused = _useState2[0],
      setIsFocused = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isInputFilledIn = _useState4[0],
      setIsInputFilledIn = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isLabelShrank = _useState6[0],
      setIsLabelShrank = _useState6[1];

  var generatedStub = useGeneratedId();
  var generatedId = "field-".concat(generatedStub);
  var context = useMemo(function () {
    return {
      id: idProp || generatedId,
      isFocused: isFocused,
      onFocus: function onFocus() {
        return setIsFocused(true);
      },
      onBlur: function onBlur() {
        return setIsFocused(false);
      },
      hasError: hasError,
      isInputFilledIn: isInputFilledIn,
      onFill: function onFill() {
        return setIsInputFilledIn(true);
      },
      onEmpty: function onEmpty() {
        return setIsInputFilledIn(false);
      },
      isLabelShrank: isLabelShrank,
      onLabelExpand: function onLabelExpand() {
        return setIsLabelShrank(false);
      },
      onLabelShrank: function onLabelShrank() {
        return setIsLabelShrank(true);
      },
      isDisabled: disabled,
      isReadOnly: readOnly
    };
  }, [idProp, generatedId, isFocused, hasError, isInputFilledIn, isLabelShrank, disabled, readOnly]);
  return /*#__PURE__*/React.createElement(SuperFieldContext.Provider, {
    value: context
  }, /*#__PURE__*/React.createElement(Box, {
    ref: ref,
    sx: {
      position: 'relative',
      pt: 3,
      fontFamily: 'body',
      color: function () {
        if (hasError) {
          return 'danger';
        } else if (disabled) {
          return 'gray.2';
        } else if (isLabelShrank) {
          return 'inherit';
        } else {
          return 'gray.2';
        }
      }()
    }
  }, children));
});
SuperField.displayName = 'SuperField';
process.env.NODE_ENV !== "production" ? SuperField.propTypes = {
  children: PropTypes.node,
  disabled: PropTypes.bool,
  hasError: PropTypes.bool,
  id: PropTypes.string,
  readOnly: PropTypes.bool
} : void 0;
export default SuperField;