import React from "react";
import Input from "../BaseInput";
import FlexBox from "../../layout/Flex";
import Text from "../../asorted/Text";
import styled from "styled-components";
// TODO: Replace me with a real button as soon as they are designed
const MaxButton = styled.button `
  color: ${p => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
  background-color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
  border-radius: 100px;
  border-width: 0;
  height: 31px;
  padding-left: 13px;
  padding-right: 13px;
  cursor: pointer;

  &:disabled {
    color: ${p => p.theme.colors.neutral.c50};
    background-color: ${p => (p.active ? p.theme.colors.neutral.c30 : "transparent")};
    cursor: unset;
  }
`;
function serialize(value) {
    return value ? "" + value : "";
}
function deserialize(value) {
    try {
        return parseFloat(value);
    }
    catch (error) {
        return undefined;
    }
}
function NumberInput({ value, onPercentClick, max, disabled, ...inputProps }, ref) {
    return (React.createElement(Input, { ref: ref, serialize: serialize, deserialize: deserialize, ...inputProps, type: "number", value: value, max: max, disabled: disabled, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map(percent => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
            React.createElement(Text, { variant: "tiny", color: "inherit" },
                percent * 100,
                "%"))))) }));
}
export default React.forwardRef(NumberInput);
//# sourceMappingURL=index.js.map