import React from 'react';
import styled from 'styled-components';
import { AnimatePresence, motion } from 'framer-motion';
import { Fieldset, Flexbox, FormLabel, OldIcon, Legend, Tooltip, Typography, VisuallyHidden } from '../..';
import { assert } from '../../common/utils';
var hasError = function hasError(error) {
  return error && error !== '';
};
var Wrapper = styled.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 = styled(OldIcon.Questionmark).withConfig({
  displayName: "FormField__TooltipIcon",
  componentId: "sc-ydn0fr-1"
})(["margin-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
var BottomWrapper = styled(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.createElement(React.Fragment, null, children) : React.createElement(Flexbox, {
    container: true,
    alignItems: "center"
  }, children, labelTooltip && React.createElement(Tooltip, {
    position: labelTooltipPosition,
    label: labelTooltip,
    inModal: labelTooltipInModal,
    wrapChild: labelTooltipInModal
  }, React.createElement(TooltipIcon, {
    size: 4
  })));
};
export var FormField = React.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.createElement(FormLabel, {
      disabled: disabled
    }, React.createElement(WithOptionalAddon, {
      hideLabel: hideLabel,
      labelTooltip: labelTooltip,
      labelTooltipInModal: labelTooltipInModal,
      labelTooltipPosition: labelTooltipPosition
    }, hideLabel ? React.createElement(VisuallyHidden, null, labelText) : labelText), children);
    if (group) {
      field = React.createElement(Fieldset, null, React.createElement(WithOptionalAddon, {
        hideLabel: hideLabel,
        labelTooltip: labelTooltip,
        labelTooltipInModal: labelTooltipInModal,
        labelTooltipPosition: labelTooltipPosition
      }, React.createElement(Legend, {
        styleType: "label"
      }, labelText)), children);
    } else if (fieldId || forId) {
      field = React.createElement(React.Fragment, null, React.createElement(FormLabel, {
        hideLabel: hideLabel,
        forId: fieldId || forId
      }, React.createElement(WithOptionalAddon, {
        hideLabel: hideLabel,
        labelTooltip: labelTooltip,
        labelTooltipInModal: labelTooltipInModal,
        labelTooltipPosition: labelTooltipPosition
      }, labelText)), children);
    }
  }
  if (forId) {
    assert(false, "FormField: the prop forId is deprecated, please use fieldId instead.", {
      level: 'warn'
    });
  }
  if (showRequired) {
    assert(false, "FormField: the prop showRequired is deprecated, please use required instead.", {
      level: 'warn'
    });
  }
  return React.createElement(Wrapper, {
    $width: width,
    className: className,
    ref: ref
  }, label ? field : children, React.createElement(AnimatePresence, null, hasError(error) ? React.createElement(BottomWrapper, {
    initial: {
      y: -10,
      opacity: 0
    },
    animate: {
      y: 0,
      opacity: 1
    },
    exit: {
      y: 0,
      opacity: 0
    },
    "aria-live": "polite"
  }, React.createElement(Typography, {
    type: "tertiary",
    color: function color(t) {
      return t.color.danger;
    }
  }, React.createElement(VisuallyHidden, null, "Error: "), error)) : extraInfo && React.createElement(BottomWrapper, {
    initial: {
      y: -10,
      opacity: 0
    },
    animate: {
      y: 0,
      opacity: 1
    },
    exit: {
      y: 0,
      opacity: 0
    },
    "aria-live": "polite"
  }, React.createElement(Typography, {
    type: "tertiary",
    color: function color(t) {
      return disabled ? t.color.disabled : t.color.label;
    }
  }, extraInfo))));
});