import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { useConsolidatedRef } from '../../../hooks';
import { defaultThemeProp } from '../../../theme';
import { StyledFormControl } from '../../FormControl';
import Flex from '../../Flex';
import { StyledSelectInput } from '../ComboBox.styles';
export const StyledSingleSelectInput = styled(StyledSelectInput) ``;
const StyledVisualContainer = styled.span(props => {
    const { theme: { base, components: { 'form-control': formControl, input: { height } } } } = props;
    return css `
    min-width: calc(${height} - ${formControl['border-width']});
    padding: 0 calc(0.5 * ${base.spacing});
    height: calc(${height} - 2 * ${formControl['border-width']});

    & + input {
      margin-inline-start: 0;
    }
  `;
});
StyledVisualContainer.defaultProps = defaultThemeProp;
const SingleSelectInput = forwardRef(function SingleSelectInput(props, ref) {
    const { value, readOnly, disabled, status, actions, onChange, onResolveSuggestion, selected, visual, ...restProps } = props;
    const inputRef = useConsolidatedRef(ref);
    return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, disabled: disabled, status: status, readOnly: readOnly, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, onClick: () => {
                    inputRef.current?.focus();
                    inputRef.current?.click();
                }, children: visual })), _jsx("input", { disabled: disabled, size: 1, value: value || selected?.text || '', 
                // no-op avoids react uncontrolled warning
                onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: 'off', ...restProps, ref: inputRef }), actions] }));
});
export default SingleSelectInput;
//# sourceMappingURL=SingleSelectInput.js.map