import _pick from "ramda/src/pick";
import _pickBy from "ramda/src/pickBy";
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled, { css } from 'styled-components';
import { Flexbox, FormField, Typography } from '../../..';
import NormalizedElements from '../../../common/NormalizedElements';
var hasError = function hasError(error) {
  return error && error !== '';
};
var height = css(["height:", "px;"], function (p) {
  return p.size === 's' ? p.theme.spacing.unit(8) : p.theme.spacing.unit(10);
});
var darkmodeAutocompleteStyles = css(["", ""], function (p) {
  return p.theme.isDarkMode ? "\n        &:-webkit-autofill,\n        &:-webkit-autofill:hover,\n        &:-webkit-autofill:focus {\n          border: 1px solid ".concat(p.theme.color.inputBorder, ";\n          -webkit-text-fill-color: ").concat(p.theme.color.text, ";\n          -webkit-box-shadow: 0 0 0px 1000px ").concat(p.theme.color.inputBackground, " inset;\n        }") : '';
});
var background = css(["background-color:", ";"], function (p) {
  if (p.disabled && p.variant !== 'quiet') {
    return p.theme.color.disabledBackground;
  }
  if (p.variant === 'quiet') {
    return 'transparent';
  }
  return p.theme.color.inputBackground;
});
var hoverBorderStyles = css(["", ""], function (p) {
  return p.disabled ? '' : "\n      &:hover {\n        border-color: ".concat(p.theme.color.inputBorderHover, ";\n      }\n");
});
var focusBorderStyles = css(["&:focus{border-color:", ";}"], function (p) {
  return p.theme.color.borderActive;
});
var borderStyles = css(["border:solid;border-color:", ";border-width:", ";&:focus{border-width:1px;}position:relative;", " ", " ", ""], function (p) {
  if (hasError(p.error)) return p.theme.color.inputBorderError;
  if (p.success) return p.theme.color.inputBorderSuccess;
  return p.theme.color.inputBorder;
}, function (p) {
  return p.variant === 'quiet' ? '0 0 2px 0' : '1px';
}, hoverBorderStyles, focusBorderStyles, function (p) {
  return p.disabled && p.variant === 'quiet' ? "border-color: ".concat(p.theme.isDarkMode ? p.theme.color.inputBorder : p.theme.color.buttonBackgroundDisabled, ";") : '';
});
export var placeholderNormalization = css(["&::placeholder{color:", ";line-height:inherit;opacity:1;}", ";&:disabled::placeholder{color:", ";}"], function (p) {
  return p.variant === 'quiet' ? p.theme.color.buttonTextDisabled : p.theme.color.label;
}, function (p) {
  return p.variant === 'quiet' ? "&:focus::placeholder { color: ".concat(p.theme.color.disabledText, "}") : '';
}, function (p) {
  return p.theme.color.disabledText;
});
var AddonBox = styled(Flexbox).withConfig({
  displayName: "Text__AddonBox",
  componentId: "sc-11cwodo-0"
})(["width:", "px;top:0;height:100%;padding-left:", "px;padding-right:", "px;position:absolute;", " ", " ", " ", ""], function (p) {
  return p.theme.spacing.unit(8);
}, function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.position === 'left' ? 'left: 0;' : '';
}, function (p) {
  return p.position === 'right' ? "right: ".concat(p.theme.spacing.unit(1), "px;") : '';
}, function (p) {
  return p.variant === 'quiet' ? "&:not(:focus) {\n          padding-left: 0;\n          padding-right: 0;\n        }" : '';
}, function (p) {
  return p.variant === 'quiet' && p.position === 'right' ? "&:not(:focus) {\n          right: 0;\n        }" : '';
});
var Input = styled(NormalizedElements.Input).attrs(function (p) {
  return {
    type: p.type || 'text'
  };
}).withConfig({
  displayName: "Text__Input",
  componentId: "sc-11cwodo-1"
})(["border:0;width:100%;padding:", "px;margin:0;line-height:inherit;box-sizing:border-box;border-radius:", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (p) {
  return p.theme.spacing.unit(p.variant === 'quiet' ? 0 : 2);
}, function (p) {
  return p.theme.borderRadius4;
}, height, borderStyles, background, placeholderNormalization, darkmodeAutocompleteStyles, function (p) {
  return p.leftAddon ? "padding-left: ".concat(p.theme.spacing.unit(8), "px;") : '';
}, function (p) {
  return p.rightAddon ? "padding-right: ".concat(p.theme.spacing.unit(10), "px;") : '';
}, function (p) {
  return p.variant === 'quiet' ? "color: ".concat(p.theme.isDarkMode ? p.theme.color.buttonText : p.theme.color.backgroundBlack, ";\n         &:disabled {\n           color: ").concat(p.theme.color.disabledText, ";\n         }\n         font-size: 28px;\n         font-weight: bold;\n         &:focus {\n           border-width: 0 0 2px 0;\n           outline: none;\n          }") : "color: ".concat(p.theme.color.text, ";\n         &:disabled {\n           color: ").concat(p.theme.color.disabledText, ";\n         }");
}, function (p) {
  return p.type === 'search' && "\n    &[type=\"search\"] {\n      -webkit-appearance: textfield;\n    }\n    ";
}, function (p) {
  return p.disabled && "\n      cursor: not-allowed;\n      ";
});
var Wrapper = styled.div.withConfig({
  displayName: "Text__Wrapper",
  componentId: "sc-11cwodo-2"
})(["position:relative;padding:", "px 0;"], function (p) {
  return p.theme.spacing.unit(p.variant === 'quiet' ? 1 : 0);
});
var components = {
  Input: Input,
  AddonBox: AddonBox
};
var getAriaProps = _pickBy(function (val, key) {
  return key.startsWith('aria-');
});
var getDataProps = _pickBy(function (val, key) {
  return key.startsWith('data-');
});
var TextComponent = React.forwardRef(function (props, ref) {
  var autoComplete = props.autoComplete,
    autoFocus = props.autoFocus,
    defaultValue = props.defaultValue,
    disabled = props.disabled,
    error = props.error,
    id = props.id,
    leftAddon = props.leftAddon,
    maxLength = props.maxLength,
    name = props.name,
    onBlur = props.onBlur,
    onChange = props.onChange,
    onClick = props.onClick,
    onFocus = props.onFocus,
    onMouseEnter = props.onMouseEnter,
    onMouseLeave = props.onMouseLeave,
    onKeyDown = props.onKeyDown,
    onKeyPress = props.onKeyPress,
    onKeyUp = props.onKeyUp,
    placeholder = props.placeholder,
    required = props.required,
    rightAddon = props.rightAddon,
    _props$variant = props.variant,
    variant = _props$variant === void 0 ? 'normal' : _props$variant,
    size = props.size,
    success = props.success,
    value = props.value,
    visuallyEmphasiseRequired = props.visuallyEmphasiseRequired,
    type = props.type,
    readOnly = props.readOnly,
    pattern = props.pattern,
    inputMode = props.inputMode;
  return React.createElement(FormField, _extends({}, _pick(['error', 'extraInfo', 'hideLabel', 'label', 'labelTooltip', 'labelTooltipPosition', 'labelTooltipInModal', 'className', 'width', 'disabled'], props), {
    required: visuallyEmphasiseRequired
  }), React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.text;
    }
  }, React.createElement(Wrapper, null, React.createElement(Input, _extends({
    autoComplete: autoComplete,
    autoFocus: autoFocus,
    defaultValue: defaultValue,
    disabled: disabled,
    error: error,
    id: id,
    leftAddon: leftAddon,
    maxLength: maxLength,
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onClick: onClick,
    onFocus: onFocus,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onKeyDown: onKeyDown,
    onKeyPress: onKeyPress,
    onKeyUp: onKeyUp,
    placeholder: placeholder,
    required: required,
    rightAddon: rightAddon,
    variant: variant,
    size: size,
    success: success,
    value: value,
    type: type,
    ref: ref,
    readOnly: readOnly,
    pattern: pattern,
    inputMode: inputMode
  }, getAriaProps(props), getDataProps(props), hasError(error) ? {
    'aria-invalid': true
  } : {})), leftAddon && React.createElement(AddonBox, {
    container: true,
    variant: variant,
    justifyContent: "center",
    alignItems: "center",
    position: "left"
  }, leftAddon), rightAddon && React.createElement(AddonBox, {
    container: true,
    variant: variant,
    justifyContent: variant === 'quiet' ? 'flex-end' : 'center',
    alignItems: "center",
    position: "right"
  }, rightAddon))));
});
export var Text = TextComponent;
Text.components = components;