"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FormField = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _framerMotion = require("framer-motion");
var _ = require("../..");
var _utils = require("../../common/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var hasError = function hasError(error) {
  return error && error !== '';
};
var Wrapper = _styledComponents.default.div.withConfig({
  displayName: "FormField__Wrapper",
  componentId: "sc-ydn0fr-0"
})(["", " max-width:100%;display:inline-block;"], function (p) {
  return p.$width ? "width: ".concat(p.$width, ";") : 'width: 200px;';
});
var TooltipIcon = (0, _styledComponents.default)(_.OldIcon.Questionmark).withConfig({
  displayName: "FormField__TooltipIcon",
  componentId: "sc-ydn0fr-1"
})(["margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
var BottomWrapper = (0, _styledComponents.default)(_framerMotion.motion.div).withConfig({
  displayName: "FormField__BottomWrapper",
  componentId: "sc-ydn0fr-2"
})([""]);
var WithOptionalAddon = function WithOptionalAddon(_ref) {
  var children = _ref.children,
    labelTooltip = _ref.labelTooltip,
    labelTooltipPosition = _ref.labelTooltipPosition,
    hideLabel = _ref.hideLabel,
    labelTooltipInModal = _ref.labelTooltipInModal;
  return hideLabel ? _react.default.createElement(_react.default.Fragment, null, children) : _react.default.createElement(_.Flexbox, {
    container: true,
    alignItems: "center"
  }, children, labelTooltip && _react.default.createElement(_.Tooltip, {
    position: labelTooltipPosition,
    label: labelTooltip,
    inModal: labelTooltipInModal,
    wrapChild: labelTooltipInModal
  }, _react.default.createElement(TooltipIcon, {
    size: 4
  })));
};
var FormField = exports.FormField = _react.default.forwardRef(function (_ref2, ref) {
  var children = _ref2.children,
    className = _ref2.className,
    error = _ref2.error,
    extraInfo = _ref2.extraInfo,
    fieldId = _ref2.fieldId,
    forId = _ref2.forId,
    group = _ref2.group,
    hideLabel = _ref2.hideLabel,
    label = _ref2.label,
    labelTooltip = _ref2.labelTooltip,
    labelTooltipPosition = _ref2.labelTooltipPosition,
    labelTooltipInModal = _ref2.labelTooltipInModal,
    _ref2$required = _ref2.required,
    required = _ref2$required === void 0 ? false : _ref2$required,
    _ref2$showRequired = _ref2.showRequired,
    showRequired = _ref2$showRequired === void 0 ? false : _ref2$showRequired,
    width = _ref2.width,
    disabled = _ref2.disabled;
  var labelText = label && "".concat(label, " ").concat(required || showRequired ? '*' : '');
  var field;
  if (label) {
    field = _react.default.createElement(_.FormLabel, {
      disabled: disabled
    }, _react.default.createElement(WithOptionalAddon, {
      hideLabel: hideLabel,
      labelTooltip: labelTooltip,
      labelTooltipInModal: labelTooltipInModal,
      labelTooltipPosition: labelTooltipPosition
    }, hideLabel ? _react.default.createElement(_.VisuallyHidden, null, labelText) : labelText), children);
    if (group) {
      field = _react.default.createElement(_.Fieldset, null, _react.default.createElement(WithOptionalAddon, {
        hideLabel: hideLabel,
        labelTooltip: labelTooltip,
        labelTooltipInModal: labelTooltipInModal,
        labelTooltipPosition: labelTooltipPosition
      }, _react.default.createElement(_.Legend, {
        styleType: "label"
      }, labelText)), children);
    } else if (fieldId || forId) {
      field = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.FormLabel, {
        hideLabel: hideLabel,
        forId: fieldId || forId
      }, _react.default.createElement(WithOptionalAddon, {
        hideLabel: hideLabel,
        labelTooltip: labelTooltip,
        labelTooltipInModal: labelTooltipInModal,
        labelTooltipPosition: labelTooltipPosition
      }, labelText)), children);
    }
  }
  if (forId) {
    (0, _utils.assert)(false, "FormField: the prop forId is deprecated, please use fieldId instead.", {
      level: 'warn'
    });
  }
  if (showRequired) {
    (0, _utils.assert)(false, "FormField: the prop showRequired is deprecated, please use required instead.", {
      level: 'warn'
    });
  }
  return _react.default.createElement(Wrapper, {
    $width: width,
    className: className,
    ref: ref
  }, label ? field : children, _react.default.createElement(_framerMotion.AnimatePresence, null, hasError(error) ? _react.default.createElement(BottomWrapper, {
    initial: {
      y: -10,
      opacity: 0
    },
    animate: {
      y: 0,
      opacity: 1
    },
    exit: {
      y: 0,
      opacity: 0
    },
    "aria-live": "polite"
  }, _react.default.createElement(_.Typography, {
    type: "tertiary",
    color: function color(t) {
      return t.color.danger;
    }
  }, _react.default.createElement(_.VisuallyHidden, null, "Error: "), error)) : extraInfo && _react.default.createElement(BottomWrapper, {
    initial: {
      y: -10,
      opacity: 0
    },
    animate: {
      y: 0,
      opacity: 1
    },
    exit: {
      y: 0,
      opacity: 0
    },
    "aria-live": "polite"
  }, _react.default.createElement(_.Typography, {
    type: "tertiary",
    color: function color(t) {
      return disabled ? t.color.disabled : t.color.label;
    }
  }, extraInfo))));
});