"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledSearchIcon = exports.getLoadingIconStyles = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownContainer = void 0;

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

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

var _styledComponents = require("../icon/styled-components");

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 getFont() {
  var _SIZE$default$SIZE$co;

  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.SIZE.default;
  var typography = arguments.length > 1 ? arguments[1] : undefined;
  return (_SIZE$default$SIZE$co = {}, _defineProperty(_SIZE$default$SIZE$co, _constants.SIZE.default, typography.font300), _defineProperty(_SIZE$default$SIZE$co, _constants.SIZE.compact, typography.font200), _SIZE$default$SIZE$co)[size];
}

function getControlPadding() {
  var _SIZE$default$SIZE$co2;

  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.SIZE.default;
  var sizing = arguments.length > 1 ? arguments[1] : undefined;
  var type = arguments.length > 2 ? arguments[2] : undefined;
  return (_SIZE$default$SIZE$co2 = {}, _defineProperty(_SIZE$default$SIZE$co2, _constants.SIZE.default, {
    paddingTop: sizing.scale400,
    paddingBottom: sizing.scale400,
    paddingLeft: type === _constants.TYPE.search ? sizing.scale1000 : sizing.scale500,
    paddingRight: type === _constants.TYPE.select ? sizing.scale1000 : sizing.scale800
  }), _defineProperty(_SIZE$default$SIZE$co2, _constants.SIZE.compact, {
    paddingTop: sizing.scale200,
    paddingBottom: sizing.scale200,
    paddingLeft: type === _constants.TYPE.search ? sizing.scale1000 : sizing.scale500,
    paddingRight: type === _constants.TYPE.select ? sizing.scale1000 : sizing.scale800
  }), _SIZE$default$SIZE$co2)[size];
}

var StyledDropdownContainer = (0, _index.styled)('div', function (props) {
  var sizing = props.$theme.sizing;
  return {
    boxSizing: 'border-box',
    position: 'absolute',
    width: '100%',
    zIndex: 1,
    marginTop: sizing.scale300,
    paddingTop: '0',
    paddingBottom: '0',
    paddingLeft: sizing.scale300,
    paddingRight: sizing.scale300
  };
});
exports.StyledDropdownContainer = StyledDropdownContainer;
var StyledOptionContent = (0, _index.styled)('div', function (props) {
  var $isHighlighted = props.$isHighlighted,
      $selected = props.$selected,
      $disabled = props.$disabled,
      $theme = props.$theme;
  var _$theme$colors = $theme.colors,
      foregroundAlt = _$theme$colors.foregroundAlt,
      primary400 = _$theme$colors.primary400,
      foreground = _$theme$colors.foreground;
  return {
    cursor: $disabled ? 'not-allowed' : 'pointer',
    color: $disabled ? foregroundAlt : $selected || $isHighlighted ? primary400 : foreground,
    fontWeight: $selected ? 'bold' : 'normal'
  };
});
exports.StyledOptionContent = StyledOptionContent;
var StyledRoot = (0, _index.styled)('div', function (props) {
  var typography = props.$theme.typography,
      $size = props.$size;
  return _objectSpread({}, getFont($size, typography), {
    boxSizing: 'border-box'
  });
});
exports.StyledRoot = StyledRoot;
var StyledControlContainer = (0, _index.styled)('div', function (props) {
  var $disabled = props.$disabled,
      $error = props.$error,
      $isFocused = props.$isFocused,
      $isPseudoFocused = props.$isPseudoFocused,
      $type = props.$type,
      $searchable = props.$searchable,
      _props$$theme = props.$theme,
      colors = _props$$theme.colors,
      sizing = _props$$theme.sizing,
      animation = _props$$theme.animation,
      borders = _props$$theme.borders;
  return {
    overflow: 'hidden',
    position: 'relative',
    color: $disabled ? colors.inputTextDisabled : colors.foreground,
    boxSizing: 'border-box',
    display: 'flex',
    width: '100%',
    cursor: $disabled ? 'not-allowed' : $searchable || $type === _constants.TYPE.search ? 'text' : 'pointer',
    backgroundColor: $disabled ? colors.inputFillDisabled : $isFocused || $isPseudoFocused ? colors.background : $error ? colors.negative50 : colors.inputFill,
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: $disabled ? colors.inputFillDisabled : $error ? colors.negative400 : $isFocused || $isPseudoFocused ? colors.primary400 : colors.inputFill,
    borderRadius: borders.useRoundedCorners ? sizing.scale100 : '0',
    boxShadow: "0 2px 6px ".concat($disabled ? 'transparent' : $isFocused || $isPseudoFocused ? $error ? colors.shadowError : colors.shadowFocus : 'transparent'),
    transitionProperty: 'border, boxShadow, backgroundColor',
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve
  };
});
exports.StyledControlContainer = StyledControlContainer;
var StyledValueContainer = (0, _index.styled)('span', function (props) {
  var $type = props.$type,
      $size = props.$size,
      sizing = props.$theme.sizing;
  var padding = getControlPadding($size, sizing, $type);
  return {
    boxSizing: 'border-box',
    display: 'inline-block',
    paddingLeft: $type === _constants.TYPE.search ? padding.paddingLeft : 0
  };
});
exports.StyledValueContainer = StyledValueContainer;
var StyledPlaceholder = (0, _index.styled)('div', function (props) {
  var $disabled = props.$disabled,
      $size = props.$size,
      $type = props.$type,
      _props$$theme2 = props.$theme,
      colors = _props$$theme2.colors,
      sizing = _props$$theme2.sizing;
  return _objectSpread({
    position: 'absolute',
    top: '0',
    bottom: '0',
    right: '0',
    left: '0',
    display: 'flex',
    alignItems: 'center',
    color: $disabled ? colors.inputFillDisabled : colors.foregroundAlt,
    maxWidth: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }, getControlPadding($size, sizing, $type));
});
exports.StyledPlaceholder = StyledPlaceholder;
var StyledSingleValue = (0, _index.styled)('div', function (props) {
  var $size = props.$size,
      $type = props.$type,
      sizing = props.$theme.sizing;
  return _objectSpread({
    boxSizing: 'border-box',
    position: 'absolute',
    top: '0',
    left: '0',
    height: '100%',
    whiteSpace: 'nowrap',
    maxWidth: '100%'
  }, getControlPadding($size, sizing, $type));
});
exports.StyledSingleValue = StyledSingleValue;
var StyledInputContainer = (0, _index.styled)('div', function (props) {
  var $size = props.$size,
      $type = props.$type,
      $searchable = props.$searchable,
      _props$$theme3 = props.$theme,
      sizing = _props$$theme3.sizing,
      typography = _props$$theme3.typography;
  var padding = getControlPadding($size, sizing, $type);
  var font = getFont($size, typography);
  return _objectSpread({
    position: 'relative',
    display: 'inline-block',
    maxWidth: '100%',
    background: 'transparent',
    border: 'none',
    boxShadow: 'none',
    outline: 'none',
    marginTop: '0',
    marginBottom: '0',
    marginLeft: '0',
    marginRight: '0'
  }, padding, {
    paddingLeft: $type === _constants.TYPE.search ? '0' : padding.paddingLeft,
    height: !$searchable ? font.lineHeight : 'auto',
    boxSizing: 'content-box'
  });
});
exports.StyledInputContainer = StyledInputContainer;
var StyledInput = (0, _index.styled)('input', function (props) {
  var typography = props.$theme.typography,
      $size = props.$size,
      $disabled = props.$disabled,
      $searchable = props.$searchable,
      $width = props.$width;
  return _objectSpread({}, getFont($size, typography), {
    boxSizing: 'content-box',
    width: $disabled || !$searchable ? '1px' : $width || 'auto',
    maxWidth: '100%',
    background: 'transparent',
    border: 'none',
    boxShadow: 'none',
    display: 'inline-block',
    outline: 'none',
    marginTop: '0',
    marginBottom: '0',
    marginLeft: '0',
    marginRight: '0',
    paddingTop: '0',
    paddingBottom: '0',
    paddingLeft: '0',
    paddingRight: '0'
  });
});
exports.StyledInput = StyledInput;
var StyledInputSizer = (0, _index.styled)('div', {
  position: 'absolute',
  top: 0,
  left: 0,
  visibility: 'hidden',
  height: 0,
  overflow: 'scroll',
  whiteSpace: 'pre'
});
exports.StyledInputSizer = StyledInputSizer;
var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
  var $theme = props.$theme,
      $disabled = props.$disabled;
  var colors = $theme.colors;
  return _objectSpread({}, (0, _styledComponents.getSvgStyles)({
    $theme: $theme
  }), {
    color: $disabled ? colors.inputTextDisabled : colors.foregroundAlt,
    cursor: $disabled ? 'not-allowed' : 'pointer',
    position: 'absolute',
    right: '12px',
    display: 'inline-block',
    height: '100%'
  });
});
exports.StyledSelectArrow = StyledSelectArrow;
var StyledClearIcon = (0, _index.styled)('svg', function (props) {
  var $type = props.$type,
      $theme = props.$theme;
  var colors = $theme.colors;
  return _objectSpread({}, (0, _styledComponents.getSvgStyles)({
    $theme: $theme
  }), {
    color: colors.foregroundAlt,
    cursor: 'pointer',
    position: 'absolute',
    right: $type !== 'select' ? '14px' : '30px',
    display: 'inline-block',
    height: '100%'
  });
});
exports.StyledClearIcon = StyledClearIcon;

var getLoadingIconStyles = function getLoadingIconStyles(props) {
  var $type = props.$type,
      $theme = props.$theme;
  var colors = $theme.colors;
  return _objectSpread({}, (0, _styledComponents.getSvgStyles)({
    $theme: $theme
  }), {
    color: colors.foregroundAlt,
    position: 'absolute',
    right: $type !== 'select' ? '14px' : '30px',
    display: 'inline-block',
    height: '100%'
  });
};

exports.getLoadingIconStyles = getLoadingIconStyles;
var StyledSearchIcon = (0, _index.styled)('svg', function (props) {
  var $disabled = props.$disabled,
      $theme = props.$theme;
  var colors = $theme.colors;
  return _objectSpread({}, (0, _styledComponents.getSvgStyles)({
    $theme: $theme
  }), {
    color: $disabled ? colors.inputTextDisabled : colors.foregroundAlt,
    cursor: $disabled ? 'not-allowed' : 'pointer',
    position: 'absolute',
    left: '12px',
    display: 'inline-block',
    height: '100%',
    zIndex: 1
  });
});
exports.StyledSearchIcon = StyledSearchIcon;