import React, { useState, useEffect } from 'react';
import { a as _objectSpread2, c as _slicedToArray, e as _extends } from './_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { C as Context } from './index-91504e81.js';
import Box from './ui/box.js';
import { c as cc } from './index-9efc6429.js';

var InputMode = variant({
  prop: "mode",
  scale: "textInputModes",
  variants: {
    disabled: {}
  }
});
var WrapperMode = variant({
  prop: "mode",
  scale: "textWrapperModes",
  variants: {
    label: {}
  }
});
var InputVariant = variant({
  prop: "variant",
  scale: "textInputVariants",
  variants: {
    dropdown: {}
  }
});
var InputSize = variant({
  prop: "size",
  scale: "textInputSize",
  variants: {
    small: {}
  }
}); // Non customizable CSS props

var inputStyle = function inputStyle(props) {
  var theme = props.theme,
      multiline = props.multiline,
      hasPostfixComponent = props.hasPostfixComponent;
  var radii = theme.radii,
      borderWidths = theme.borderWidths,
      colors = theme.colors,
      space = theme.space;
  var paddingTopBottom = "".concat(space.lg - space.xs, "px"); // 10px

  var paddingRight = hasPostfixComponent ? "".concat(3 * space.lg - space.xs, "px") : "".concat(space.sm, "px"); // 8px

  var paddingLeft = "".concat(space.sm, "px"); // adds left padding when there's an icon, applies only if it's an input element

  var textInputStyle = !multiline ? {
    "&:not(:first-child)": {
      paddingLeft: 3 * space.lg - space.xs // 38px

    }
  } : {};
  return _objectSpread2({
    borderRadius: radii.sm,
    border: "".concat(borderWidths.xs, "px solid ").concat(colors.grey.haptik),
    backgroundColor: colors.grey.pastel,
    boxSizing: "border-box",
    width: "100%",
    padding: "".concat(paddingTopBottom, " ").concat(paddingRight, " ").concat(paddingTopBottom, " ").concat(paddingLeft),
    transition: "border 0.3s ease, color 0.3s ease",
    outline: "none",
    "&:focus": {
      border: "".concat(borderWidths.xs, "px solid ").concat(colors.blue.haptik)
    },
    "&:hover": {
      border: "".concat(borderWidths.xs, "px solid ").concat(colors.blue.haptik, " !important") // This is needed, for now.

    },
    resize: "none",
    overflowY: "hidden",
    color: colors.black.haptik,
    "&::-webkit-input-placeholder": {
      color: colors.grey.dark
    }
  }, textInputStyle);
};

var inputWrapperStyle = {
  position: "relative",
  outline: "none"
};
var ThemedTextInputWrapper = styled(Box)(inputWrapperStyle, space, color, border, typography, WrapperMode);
var ThemedTextInput = styled("input")(inputStyle, space, color, border, typography, InputMode, InputVariant, InputSize);
var ThemedTextarea = styled("textarea")(inputStyle, space, color, border, typography, InputMode, WrapperMode); // Customizable CSS props

ThemedTextInputWrapper.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  variant: "default",
  padding: "zero"
};
ThemedTextInput.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  variant: "default",
  fontSize: "2"
};
ThemedTextarea.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  fontSize: "2"
};

var css = ".TextInput_inputWrapper__3azwH {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #fff;\n  padding: 0 8px;\n  box-sizing: border-box;\n  outline: none;\n  transition: 0.2s ease-out;\n  background: #fff; }\n  .TextInput_inputWrapper__3azwH.TextInput_error__mZn5f {\n    border-color: #f44336;\n    background-color: rgba(244, 67, 54, 0.05); }\n  .TextInput_inputWrapper__3azwH.TextInput_disabled__1n0Y3 {\n    background-color: #eee; }\n  .TextInput_inputWrapper__3azwH .TextInput_input__KxzGk {\n    width: 100%; }\n  .TextInput_inputWrapper__3azwH input,\n  .TextInput_inputWrapper__3azwH textarea {\n    display: inline-block;\n    vertical-align: middle;\n    font-size: 12px;\n    border-radius: 3px;\n    outline: none;\n    border: none;\n    padding: 4px 0;\n    width: 100%;\n    line-height: 1.9;\n    background-color: transparent;\n    resize: none; }\n    .TextInput_inputWrapper__3azwH input::placeholder,\n    .TextInput_inputWrapper__3azwH textarea::placeholder {\n      color: #000;\n      opacity: 0.3; }\n    .TextInput_inputWrapper__3azwH input.TextInput_error__mZn5f,\n    .TextInput_inputWrapper__3azwH textarea.TextInput_error__mZn5f {\n      border-color: #f44336;\n      background-color: rgba(244, 67, 54, 0); }\n";
var styles = {"inputWrapper":"TextInput_inputWrapper__3azwH","error":"TextInput_error__mZn5f","disabled":"TextInput_disabled__1n0Y3","input":"TextInput_input__KxzGk"};
styleInject(css);

var TextInput = function TextInput(_ref) {
  var className = _ref.className,
      onKeyDown = _ref.onKeyDown,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      onMouseDown = _ref.onMouseDown,
      innerRef = _ref.innerRef,
      value = _ref.value,
      onChange = _ref.onChange,
      focused = _ref.focused,
      error = _ref.error,
      _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? "Type here..." : _ref$placeholder,
      inputRef = _ref.inputRef,
      disabled = _ref.disabled,
      editable = _ref.editable,
      multiline = _ref.multiline,
      prefixClassName = _ref.prefixClassName,
      prefixComponent = _ref.prefixComponent,
      postfixComponent = _ref.postfixComponent,
      themed = _ref.themed,
      variant = _ref.variant,
      label = _ref.label,
      style = _ref.style,
      size = _ref.size;
  var input = React.useRef(null);

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;

  var focusedStyle = !disabled && focused ? {
    borderColor: primaryColor
  } : {};
  var focusedClassNameString = focused ? "focused" : "";
  var errorClassName = error ? styles.error : "";
  var disabledClassName = disabled ? styles.disabled : "";

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      textValue = _useState2[0],
      setTextValue = _useState2[1];

  var handleRef = React.useCallback(function (ref) {
    input.current = ref;
    if (typeof inputRef === "function") inputRef(ref);else inputRef.current = ref;
  });

  var handleChange = function handleChange(e) {
    onChange(e.target.value);
    setTextValue(e.target.value);

    if (multiline && input.current) {
      input.current.style.height = "auto";
      input.current.style.height = "".concat(input.current.scrollHeight, "px");
    }
  };

  var renderInput = function renderInput() {
    return multiline ? React.createElement("textarea", {
      disabled: disabled || !editable,
      value: textValue,
      onChange: handleChange,
      placeholder: placeholder,
      type: "text",
      ref: handleRef,
      className: "".concat(prefixClassName, "-input"),
      "data-testid": "input-textarea"
    }) : React.createElement("input", {
      disabled: disabled || !editable,
      value: textValue,
      onChange: handleChange,
      placeholder: placeholder,
      "data-testid": "inputText",
      type: "text",
      ref: handleRef,
      className: "".concat(prefixClassName, "-input")
    });
  };

  useEffect(function () {
    setTextValue(value);
  }, [value]);
  var classNames = {
    main: cc([styles.inputWrapper, className, prefixClassName, focusedClassNameString, errorClassName, disabledClassName])
  };

  var renderInputContainer = function renderInputContainer() {
    if (themed) {
      var renderElement = null;
      var mode = null;
      var inputWrapperMode = "default";
      var isDropdown = variant === "dropdown" || variant === "dropdownActive" || variant === "dropdownActiveTop";

      if (disabled) {
        mode = "disabled";
      }

      if (error) {
        mode = "error";
      }

      if (isDropdown) {
        inputWrapperMode = "dropdown";
      }

      if (label || error) {
        inputWrapperMode = "label";
      }

      var defaultInputProps = {
        disabled: disabled || !editable,
        value: textValue,
        onChange: handleChange,
        placeholder: placeholder || "type here...",
        type: "text",
        ref: isDropdown ? innerRef : handleRef,
        variant: variant,
        mode: mode,
        style: style,
        size: size
      };
      var additionalInputProps = {
        onFocus: onFocus,
        onBlur: onBlur,
        onMouseDown: onMouseDown,
        onKeyDown: onKeyDown
      };

      var allInputProps = _objectSpread2({}, defaultInputProps, {}, additionalInputProps);

      if (!multiline) {
        if (isDropdown) {
          renderElement = React.createElement(ThemedTextInputWrapper, _extends({
            mode: inputWrapperMode
          }, additionalInputProps, {
            ref: innerRef,
            tabIndex: "0"
          }), prefixComponent, React.createElement(ThemedTextInput, _extends({}, defaultInputProps, {
            "data-testid": "inputText",
            ref: handleRef
          })), postfixComponent);
        } else {
          renderElement = React.createElement(ThemedTextInputWrapper, {
            mode: inputWrapperMode
          }, prefixComponent, React.createElement(ThemedTextInput, _extends({}, allInputProps, {
            "data-testid": "inputText",
            hasPostfixComponent: !!postfixComponent
          })), postfixComponent);
        }
      } else {
        renderElement = React.createElement(ThemedTextarea, _extends({}, allInputProps, {
          ref: handleRef,
          multiline: true,
          mode: label || error ? "label" : "default",
          "data-testid": "input-textarea"
        }));
      }

      return renderElement;
    }

    return React.createElement("div", {
      ref: innerRef,
      tabIndex: "0",
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseDown: onMouseDown,
      onKeyDown: onKeyDown,
      className: classNames.main,
      style: focusedStyle
    }, prefixComponent, React.createElement("div", {
      className: "".concat(styles.input, " ").concat(prefixClassName, "-inner")
    }, renderInput()), postfixComponent);
  };

  return renderInputContainer();
};
TextInput.propTypes = {
  className: PropTypes.string,
  editable: PropTypes.bool,
  disabled: PropTypes.bool,
  error: PropTypes.bool,
  focused: PropTypes.bool,
  innerRef: PropTypes.func,
  inputRef: PropTypes.func,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  onKeyDown: PropTypes.func,
  onMouseDown: PropTypes.func,
  placeholder: PropTypes.string,
  postfixComponent: PropTypes.node,
  prefixClassName: PropTypes.string,
  prefixComponent: PropTypes.node,
  value: PropTypes.string,
  multiline: PropTypes.bool,
  themed: PropTypes.bool,
  variant: PropTypes.string,
  label: PropTypes.string,
  style: PropTypes.object
};
TextInput.defaultProps = {
  className: "",
  editable: true,
  disabled: false,
  error: false,
  focused: false,
  multiline: false,
  innerRef: function innerRef() {},
  inputRef: function inputRef() {},
  onBlur: function onBlur() {},
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  onKeyDown: function onKeyDown() {},
  onMouseDown: function onMouseDown() {},
  placeholder: "",
  prefixClassName: "",
  value: "",
  themed: false,
  variant: "",
  label: "",
  style: {}
};
TextInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TextInput",
  "props": {
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "editable": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "multiline": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "inputRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onKeyDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onMouseDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "variant": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "postfixComponent": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "prefixComponent": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    }
  }
};

export { TextInput as T, inputStyle as i };
