import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import { useConsolidatedRef } from '../../../hooks';
import { defaultThemeProp } from '../../../theme';
import { StyledFormControl } from '../../FormControl';
import Flex from '../../Flex';
import { StyledSelectInput } from '../ComboBox.styles';
import { isInstance } from '../../../utils';
const StyledPrimaryContainer = styled.div ``;
const StyledInput = styled.input `
  &[aria-expanded='false']:has(+ ${StyledPrimaryContainer}) {
    ${hideVisually}
  }
`;
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;
export const StyledSingleSelectInput = styled(StyledSelectInput) `
  &:has(input[aria-expanded='true']) {
    ${StyledPrimaryContainer} {
      ${hideVisually}
    }
  }
`;
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(StyledInput, { disabled: disabled, size: 1, value: value || selected?.text || '', onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: '_off', ...restProps, ref: inputRef }), selected?.primary && (_jsx(Flex, { as: StyledPrimaryContainer, container: {
                    alignItems: 'center',
                    justify: 'between',
                    gap: 2,
                    pad: [undefined, 1]
                }, item: {
                    grow: 1
                }, onClick: (e) => {
                    if (!inputRef.current)
                        return;
                    const interactiveEl = isInstance(e.target, Element)
                        ? e.target.closest('a') || e.target.closest('button')
                        : null;
                    if (!interactiveEl) {
                        inputRef.current.focus();
                        inputRef.current.click();
                    }
                }, children: selected.primary })), actions] }));
});
export default SingleSelectInput;
//# sourceMappingURL=SingleSelectInput.js.map