import React, { useCallback } from "react";
import styled from "styled-components";
import { InputContainer, InputErrorContainer } from "../BaseInput";
function getDividerColor(props) {
    if (props.disabled) {
        return props.theme?.colors.neutral.c40;
    }
    if (props.error) {
        return props.theme?.colors.error.c50;
    }
    if (props.focus) {
        return props.theme?.colors.primary.c80;
    }
    return props.theme?.colors.neutral.c40;
}
function getHoverBolderColor(props) {
    return props.disabled || props.error ? "inherit" : props.theme?.colors.primary.c80;
}
const Divider = styled.div `
  border-right: 1px solid;
  height: 100%;
  transition: border-color 0.2s ease;

  border-color: ${getDividerColor};
  ${InputContainer}:hover & {
    border-color: ${getHoverBolderColor};
  }
`;
export default function SplitInput(props) {
    const { disabled, isDisabled, renderLeft, renderRight, error } = props;
    const [focus, setFocus] = React.useState(false);
    const onFocus = useCallback(() => {
        setFocus(true);
    }, [setFocus]);
    const onBlur = useCallback(() => {
        setFocus(false);
    }, [setFocus]);
    const disabledState = typeof disabled !== "undefined" ? disabled : isDisabled;
    return (React.createElement("div", null,
        React.createElement(InputContainer, { disabled: disabledState, focus: focus, error: error },
            React.createElement("div", { style: { width: "50%", height: "100%" } }, renderLeft({
                error,
                onFocus,
                onBlur,
                disabled: disabledState,
                isDisabled: disabledState,
            })),
            React.createElement(Divider, { focus: focus, disabled: disabled, error: error }),
            React.createElement("div", { style: { width: "50%", height: "100%" } }, typeof renderRight === "function"
                ? renderRight({
                    error,
                    onFocus,
                    onBlur,
                    disabled: disabledState,
                    isDisabled: disabledState,
                })
                : renderRight)),
        error && !disabled && React.createElement(InputErrorContainer, null, error)));
}
//# sourceMappingURL=index.js.map