import { jsx as _jsx } from "react/jsx-runtime";
import Button, { LineButton } from '../button';
import { useStyleConfig, vui } from '../core';
import { PopoverTrigger } from '../popover';
import { cs, ellipsisOverflow } from '../utils';
import { useSelectContext } from './context';
/**
 * Displays a custom button component, which opens a popover on click.
 * Text within the button is either selected value or placeholder.
 * Includes special styling for disabled, readOnly and invalid states.
 */
export const SelectButton = vui((props, ref) => {
    const { className, ...rest } = props;
    const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
    const styles = useStyleConfig('Select', useSelectContext());
    const text = valueText || placeholder;
    const disabledProps = disabled
        ? {
            activeBg: 'sandstone.79',
            cursor: 'not-allowed',
            backgroundColor: 'sandstone.79',
            borderColor: 'sandstone.79',
            hoverBg: 'sandstone.79',
            hoverBorderColor: 'sandstone.79',
            activeBorderColor: 'sandstone.79',
        }
        : undefined;
    const readOnlyProps = readOnly
        ? {
            activeBg: 'sandstone.95',
            bg: 'sandstone.95',
            color: 'seaBlue.main',
            cursor: 'auto',
            disabled: true,
            hoverBg: 'sandstone.95',
            opacity: 1,
        }
        : undefined;
    const isInvalidProps = isInvalid
        ? {
            borderColor: 'energyRed.45',
            hoverBorderColor: 'energyRed.45',
        }
        : undefined;
    const textColor = 'sandstone.10';
    const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main';
    return (_jsx(PopoverTrigger, { as: LineButton, bg: "white", className: cs('vui-selectButton', className), disabled: disabled, focusRing: 2, fontWeight: "regular", iconRight: _jsx(Button.Icon, { color: iconColor, ml: "auto", name: "falAngleDown" }), isFullWidth: true, px: 1, ref: ref, text: _jsx(Button.Text, { color: textColor, ...ellipsisOverflow, children: text }), userSelect: "text", ...styles.button, ...disabledProps, ...readOnlyProps, ...isInvalidProps, ...rest }));
});
SelectButton.displayName = 'SelectButton';
export default SelectButton;
//# sourceMappingURL=selectButton.js.map