"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Input = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _contrast = _interopRequireDefault(require("../../utils/contrast"));

var _opacity = _interopRequireDefault(require("../../utils/opacity"));

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const Input = props => {
  const theme = (0, _useTheme.default)();
  const {
    ref = null,
    startAdornment = null,
    endAdornment = null,
    fullWidth = false,
    color = "basic",
    textColor = null,
    borderColor = null,
    size = "medium",
    shape = "round",
    variant = "contained",
    align = "spaced",
    required = false,
    disabled = false,
    error = false,
    success = false,
    helperText = null,
    wrapperProps = null,
    inputProps = null,
    children,
    className,
    ...otherProps
  } = props;

  function handleBackgroundColor() {
    if (error) {
      switch (variant) {
        case "ghost":
          return `background: ${(0, _opacity.default)(theme.palette.danger[500], 20)};`;
      }
    }

    if (success) {
      switch (variant) {
        case "ghost":
          return `background: ${(0, _opacity.default)(theme.palette.success[500], 20)};`;
      }
    }

    switch (variant) {
      case "contained":
        return `background: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;

      case "outlined":
        return `background: ${"transparent"};`;

      case "ghost":
        return `background: ${(0, _isThemePalette.default)(color) ? (0, _opacity.default)(theme.palette[color][500], 8) : (0, _opacity.default)(color, 8)};`;

      default:
        return "";
    }
  }

  function handleDisabledColors() {
    if (!disabled) return "";

    switch (variant) {
      case "contained":
        return `background: ${(0, _opacity.default)(theme.palette.shade, 100)};
        color: ${(0, _opacity.default)(theme.palette.text, 40)};
        stroke: ${(0, _opacity.default)(theme.palette.text, 40)};
        border-color: ${(0, _opacity.default)(theme.palette.shade, 100)};
        `;

      case "outlined":
        return `background: ${(0, _opacity.default)(theme.palette.shade, 100)};
        color: ${(0, _opacity.default)(theme.palette.text, 40)};
        stroke: ${(0, _opacity.default)(theme.palette.text, 40)};
        border-color: ${(0, _opacity.default)(theme.palette.text, 40)};`;

      case "ghost":
        return `background: ${"transparent"};
        color: ${(0, _opacity.default)(theme.palette.text, 50)};
        stroke: ${(0, _opacity.default)(theme.palette.text, 50)};
        border-color: ${"transparent"};`;

      default:
        return "";
    }
  }

  function handleBorderColor() {
    if (error) {
      switch (variant) {
        case "contained":
          return `border-color: ${theme.palette.danger[500]};`;

        case "outlined":
          return `border-color: ${theme.palette.danger[500]};`;
      }
    }

    if (success) {
      switch (variant) {
        case "contained":
          return `border-color: ${theme.palette.success[500]};`;

        case "outlined":
          return `border-color: ${theme.palette.success[500]};`;
      }
    }

    switch (variant) {
      case "contained":
        return `border-color: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;

      case "outlined":
        return `border-color: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;

      case "ghost":
        return "border-color: transparent;";

      default:
        return "";
    }
  }

  function handleTextColor() {
    if (textColor) return `color: ${textColor}; stroke: ${textColor};`; // if value is defined by props

    if (color === "basic") return `color: ${theme.palette.text}; stroke: ${theme.palette.text};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};
        stroke: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};
        stroke: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handlePlaceholderColor() {
    if (textColor) return `color: ${(0, _opacity.default)(textColor, 80)};`; // if value is defined by props

    if (color === "basic" || disabled) return `color: ${theme.palette.subtext};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handleHelperColor() {
    if (success) return `color: ${theme.palette.success[500]};`; // if value is basic

    if (error) return `color: ${theme.palette.danger[500]};`; // if value is basic

    if (color === "basic") return `color: ${theme.palette.subtext};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handleFontSize() {
    switch (size) {
      case "xlarge":
        return "font-size: 18px;";

      case "large":
        return "font-size: 16px;";

      case "small":
        return "font-size: 12px;";

      case "mini":
        return "font-size: 10px;";

      case "medium":
      default:
        return "font-size: 14px;";
    }
  }

  function handlePadding() {
    switch (size) {
      case "xlarge":
        return "padding: 12px 0px;";

      case "large":
        return "padding: 10px 0px;";

      case "small":
        return "padding: 6px 0px;";

      case "mini":
        return "padding: 4px 0px;";

      case "medium":
      default:
        return "padding: 8px 0px;";
    }
  }

  function handlePaddingWrapper() {
    switch (size) {
      case "xlarge":
        return "padding: 0px 16px;";

      case "large":
        return "padding: 0px 14px;";

      case "small":
        return "padding: 0px 8px;";

      case "mini":
        return "padding: 0px 6px;";

      case "medium":
      default:
        return "padding: 0px 10px;";
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 10em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleAlign() {
    switch (align) {
      case "left":
        return "justify-content: flex-start;";

      case "right":
        return "justify-content: flex-end;";

      case "spaced":
        return "justify-content: space-between;";

      case "center":
      default:
        return "justify-content: center;";
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-InputWrapper",
    ...wrapperProps,
    className: _style.default.dynamic([["2459404522", [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()]], ["1809051650", [handleFontSize(), handlePadding(), handlePlaceholderColor()]], ["2535646415", [handleHelperColor()]]]) + " " + (wrapperProps && wrapperProps.className != null && wrapperProps.className || (0, _classnames.default)("Wps-InputWrapper") || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "2459404522",
      dynamic: [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()],
      children: `.Wps-InputWrapper.__jsx-style-dynamic-selector{${handleBorderColor()} ${handleShape()} ${handlePaddingWrapper()} ${handleBackgroundColor()} border-style:solid;border-width:2px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${handleAlign()} height:fit-content;width:${fullWidth ? "100%" : "max-content"};-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;${handleTextColor()} ${handleDisabledColors()};}`
    }), startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingRight: 5
      },
      className: _style.default.dynamic([["2459404522", [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()]], ["1809051650", [handleFontSize(), handlePadding(), handlePlaceholderColor()]], ["2535646415", [handleHelperColor()]]]),
      children: startAdornment
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      ref: ref,
      "data-testid": "Wps-Input",
      disabled: disabled,
      required: required,
      ...inputProps,
      ...otherProps,
      className: _style.default.dynamic([["2459404522", [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()]], ["1809051650", [handleFontSize(), handlePadding(), handlePlaceholderColor()]], ["2535646415", [handleHelperColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || inputProps && inputProps.className != null && inputProps.className || (0, _classnames.default)("Wps-Input", className) || "")
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1809051650",
      dynamic: [handleFontSize(), handlePadding(), handlePlaceholderColor()],
      children: `.Wps-Input.__jsx-style-dynamic-selector{-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;background:transparent;border:none;width:100%;${handleFontSize()};${handlePadding()};}.Wps-Input.__jsx-style-dynamic-selector::-webkit-input-placeholder{${handlePlaceholderColor()};}.Wps-Input.__jsx-style-dynamic-selector::-moz-placeholder{${handlePlaceholderColor()};}.Wps-Input.__jsx-style-dynamic-selector:-ms-input-placeholder{${handlePlaceholderColor()};}.Wps-Input.__jsx-style-dynamic-selector::placeholder{${handlePlaceholderColor()};}.Wps-Input.__jsx-style-dynamic-selector:disabled,.Wps-Input[disabled].__jsx-style-dynamic-selector{cursor:not-allowed;}`
    }), endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingLeft: 5
      },
      className: _style.default.dynamic([["2459404522", [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()]], ["1809051650", [handleFontSize(), handlePadding(), handlePlaceholderColor()]], ["2535646415", [handleHelperColor()]]]),
      children: endAdornment
    }), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _style.default.dynamic([["2459404522", [handleBorderColor(), handleShape(), handlePaddingWrapper(), handleBackgroundColor(), handleAlign(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors()]], ["1809051650", [handleFontSize(), handlePadding(), handlePlaceholderColor()]], ["2535646415", [handleHelperColor()]]]) + " " + "Wps-Helper",
      children: helperText
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "2535646415",
      dynamic: [handleHelperColor()],
      children: `.Wps-Helper.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;font-size:12px;margin-top:4px;z-index:1;${handleHelperColor()}s;}`
    })]
  });
};

exports.Input = Input;