"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Input = exports.getInputStyles = exports.InputContainer = exports.getInputContainerStyles = exports.InputEnhancer = exports.Root = void 0;

var _index = require("../styles/index.js");

var _constants = require("./constants.js");

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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; }

function getInputPadding(size, sizing) {
  var _SIZE$default$SIZE$co;

  return (_SIZE$default$SIZE$co = {}, _defineProperty(_SIZE$default$SIZE$co, _constants.SIZE.default, {
    paddingTop: sizing.scale400,
    paddingRight: sizing.scale500,
    paddingBottom: sizing.scale400,
    paddingLeft: sizing.scale500
  }), _defineProperty(_SIZE$default$SIZE$co, _constants.SIZE.compact, {
    paddingTop: sizing.scale200,
    paddingRight: sizing.scale500,
    paddingBottom: sizing.scale200,
    paddingLeft: sizing.scale500
  }), _SIZE$default$SIZE$co)[size];
}

function getBorderRadius(adjoined, radius) {
  var _ADJOINED$none$ADJOIN;

  return (_ADJOINED$none$ADJOIN = {}, _defineProperty(_ADJOINED$none$ADJOIN, _constants.ADJOINED.none, radius), _defineProperty(_ADJOINED$none$ADJOIN, _constants.ADJOINED.left, "0 ".concat(radius, " ").concat(radius, " 0")), _defineProperty(_ADJOINED$none$ADJOIN, _constants.ADJOINED.right, "".concat(radius, " 0 0 ").concat(radius)), _defineProperty(_ADJOINED$none$ADJOIN, _constants.ADJOINED.both, '0'), _ADJOINED$none$ADJOIN)[adjoined];
}

function getDecoratorBorderRadius(position, radius) {
  var _ENHANCER_POSITION$st;

  return (_ENHANCER_POSITION$st = {}, _defineProperty(_ENHANCER_POSITION$st, _constants.ENHANCER_POSITION.start, "".concat(radius, " 0 0 ").concat(radius)), _defineProperty(_ENHANCER_POSITION$st, _constants.ENHANCER_POSITION.end, "0 ".concat(radius, " ").concat(radius, " 0")), _ENHANCER_POSITION$st)[position];
}

function getFont(size, typography) {
  var _SIZE$default$SIZE$co2;

  return (_SIZE$default$SIZE$co2 = {}, _defineProperty(_SIZE$default$SIZE$co2, _constants.SIZE.default, typography.font300), _defineProperty(_SIZE$default$SIZE$co2, _constants.SIZE.compact, typography.font200), _SIZE$default$SIZE$co2)[size];
}

var Root = (0, _index.styled)('div', function (props) {
  var $size = props.$size,
      _props$$theme = props.$theme,
      colors = _props$$theme.colors,
      typography = _props$$theme.typography;
  return _objectSpread({}, getFont($size, typography), {
    color: colors.foreground,
    display: 'flex',
    width: '100%'
  });
});
exports.Root = Root;
Root.displayName = "Root";
var InputEnhancer = (0, _index.styled)('div', function (props) {
  var $position = props.$position,
      $size = props.$size,
      _props$$theme2 = props.$theme,
      colors = _props$$theme2.colors,
      sizing = _props$$theme2.sizing,
      typography = _props$$theme2.typography;
  return _objectSpread({}, getFont($size, typography), {
    color: colors.foreground,
    display: 'flex'
  }, getInputPadding($size, sizing), {
    backgroundColor: colors.inputFillEnhancer,
    borderRadius: getDecoratorBorderRadius($position, sizing.scale100)
  });
});
exports.InputEnhancer = InputEnhancer;
InputEnhancer.displayName = "InputEnhancer";

var getInputContainerStyles = function getInputContainerStyles(props) {
  var $isFocused = props.$isFocused,
      $adjoined = props.$adjoined,
      $error = props.$error,
      $disabled = props.$disabled,
      $size = props.$size,
      _props$$theme3 = props.$theme,
      colors = _props$$theme3.colors,
      sizing = _props$$theme3.sizing,
      typography = _props$$theme3.typography,
      animation = _props$$theme3.animation,
      borders = _props$$theme3.borders;
  return _objectSpread({}, getFont($size, typography), {
    color: $disabled ? colors.inputTextDisabled : colors.foreground,
    boxSizing: 'border-box',
    display: 'flex',
    width: '100%',
    backgroundColor: $disabled ? colors.inputFillDisabled : $isFocused ? colors.background : $error ? colors.inputFillError : colors.inputFill,
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: $disabled ? colors.inputFillDisabled : $error ? colors.negative400 : $isFocused ? colors.primary400 : colors.inputFill,
    borderRadius: borders.useRoundedCorners ? getBorderRadius($adjoined, sizing.scale100) : '0px',
    boxShadow: "0 2px 6px ".concat($disabled ? 'transparent' : $isFocused ? $error ? colors.shadowError : colors.shadowFocus : 'transparent'),
    transitionProperty: 'border, boxShadow, backgroundColor',
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve
  });
};

exports.getInputContainerStyles = getInputContainerStyles;
var InputContainer = (0, _index.styled)('div', getInputContainerStyles);
exports.InputContainer = InputContainer;
InputContainer.displayName = "InputContainer";

var getInputStyles = function getInputStyles(props) {
  var $disabled = props.$disabled,
      $error = props.$error,
      $size = props.$size,
      _props$$theme4 = props.$theme,
      colors = _props$$theme4.colors,
      sizing = _props$$theme4.sizing,
      typography = _props$$theme4.typography;
  return _objectSpread({}, getFont($size, typography), {
    color: $disabled ? colors.foregroundAlt : colors.foreground,
    caretColor: $error ? colors.negative400 : colors.primary,
    boxSizing: 'border-box',
    backgroundColor: 'transparent',
    borderWidth: '0',
    borderStyle: 'none',
    outline: 'none'
  }, getInputPadding($size, sizing), {
    width: '100%',
    maxWidth: '100%',
    cursor: $disabled ? 'not-allowed' : 'text',
    '::placeholder': {
      color: $disabled ? colors.inputTextDisabled : colors.foregroundAlt
    }
  });
};

exports.getInputStyles = getInputStyles;
var Input = (0, _index.styled)('input', getInputStyles);
exports.Input = Input;
Input.displayName = "Input";