var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import styled, { css } from "styled-components";
import { typography } from "styled-system";
import React, { useState, useMemo, useCallback } from "react";
import CircledCrossSolidMedium from "@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium";
import FlexBox from "../../layout/Flex";
import Text from "../../asorted/Text";
import { rgba } from "../../../styles/helpers";
import { ButtonUnstyled } from "../../cta/Button";
export const InputContainer = styled.div `
  display: flex;
  height: 48px;
  border: ${p => `1px solid ${p.theme.colors.neutral.c40}`};
  border-radius: 24px;
  transition: all 0.2s ease;
  color: ${p => p.theme.colors.neutral.c100};

  ${p => p.focus &&
    !p.error &&
    !p.warning &&
    css `
      border: 1px solid ${p.theme.colors.primary.c80};
      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};
    `};

  ${p => p.error &&
    !p.disabled &&
    css `
      border: 1px solid ${p.theme.colors.error.c50};
    `};

  ${p => !p.error &&
    p.warning &&
    !p.disabled &&
    css `
      border: 1px solid ${p.theme.colors.warning.c40};
    `};

  ${p => !p.error &&
    !p.warning &&
    !p.disabled &&
    css `
      &:hover {
        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
      }
    `};

  ${p => p.disabled &&
    css `
      color: ${p.theme.colors.neutral.c60};
      background: ${p => p.theme.colors.neutral.c20};
    `};
`;
export const BaseInput = styled.input.attrs({
    fontSize: "paragraph",
    fontWeight: "medium",
}) `
  height: 100%;
  width: 100%;
  border: 0;
  caret-color: ${p => (p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80)};
  background: none;
  outline: none;
  cursor: ${p => (p.disabled ? "not-allowed" : "text")};
  flex-shrink: 1;
  padding-left: 20px;
  padding-right: 20px;
  &::placeholder {
    color: ${p => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
  }

  /* stylelint-disable property-no-vendor-prefix */

  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
  &::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Hide type=number arrow for Firefox */
  &[type="number"] {
    -moz-appearance: textfield;
  }
  /* stylelint-enable property-no-vendor-prefix */

  ${typography}
`;
export const InputErrorContainer = styled(Text) `
  color: ${p => p.theme.colors.error.c50};
  margin-left: 12px;
`;
export const InputWarningContainer = styled(Text) `
  color: ${p => p.theme.colors.warning.c40};
  margin-left: 12px;
`;
export const InputInfoContainer = styled(Text) `
  color: ${p => p.theme.colors.neutral.c60};
  margin-left: 12px;
`;
export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
    alignItems: "center",
    pl: "16px",
})) ``;
export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
    alignItems: "center",
    pr: "16px",
})) ``;
export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
  display: flex;
`;
// Yes, this is dirty. If you can figure out a better way please change the code :).
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const IDENTITY = (_) => _;
function Input(props, ref) {
    const { value, disabled, error, warning, info, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "info", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
    const [focus, setFocus] = useState(false);
    const inputValue = useMemo(() => serialize(value), [serialize, value]);
    const handleChange = useCallback((e) => {
        onChange && onChange(deserialize(e.target.value));
        onChangeEvent && onChangeEvent(e);
    }, [onChange, onChangeEvent, deserialize]);
    const handleClear = useCallback(() => {
        onChange && onChange(deserialize(""));
    }, [onChange, deserialize]);
    const inner = (React.createElement(React.Fragment, null,
        typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
        React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, info: info, onChange: handleChange, value: inputValue, onFocus: (event) => {
                setFocus(true);
                htmlInputProps.onFocus && htmlInputProps.onFocus(event);
            }, onBlur: (event) => {
                setFocus(false);
                htmlInputProps.onBlur && htmlInputProps.onBlur(event);
            } })),
        clearable && inputValue && (React.createElement(FlexBox, { alignItems: "center", mr: 7 },
            React.createElement(ClearableButtonUnstyled, { onClick: handleClear },
                React.createElement(CircledCrossSolidMedium, { size: 18, color: "neutral.c50" })))),
        typeof renderRight === "function" ? renderRight(props) : renderRight));
    if (unwrapped) {
        return (React.createElement(FlexBox, { alignItems: "stretch", style: { height: "100%" } }, inner));
    }
    return (React.createElement("div", null,
        React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
        (error || warning || info) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 }, error ? (React.createElement(InputErrorContainer, { variant: "small" }, error)) : warning ? (React.createElement(InputWarningContainer, { variant: "small" }, warning)) : info ? (React.createElement(InputInfoContainer, { variant: "small" }, info)) : null))));
}
export default React.forwardRef(Input);
//# sourceMappingURL=index.js.map