import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState } from 'react';
import Icon, { registerIcon } from '../Icon';
import * as caretDownIcon from '../Icon/icons/caret-down.icon';
import * as caretUpIcon from '../Icon/icons/caret-up.icon';
import * as timesIcon from '../Icon/icons/times.icon';
import { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';
import { StyledFormControl } from '../FormControl';
import { createClassName, getFocusables, withTestIds } from '../../utils';
import Flex from '../Flex';
import Button from '../Button';
import FormField from '../FormField';
import { FormDialog } from '../Dialog';
import { StyledCompositeInput, StyledInputButton, StyledInputContainer } from './CompositeInput.styles';
import { getCompositeInputTestIds } from './CompositeInput.test-ids';
registerIcon(caretDownIcon, caretUpIcon, timesIcon);
export default withTestIds(forwardRef(function CompositeInput(props, ref) {
    const uid = useUID();
    const { testId, id = uid, disabled, value, onClear, required, status, info, label, labelHidden, additionalInfo, dialog: { renderer: Renderer, rendererProps, onApply, onCancel }, className, ...restProps } = props;
    const testIds = useTestIds(testId, getCompositeInputTestIds);
    const t = useI18n();
    const [open, setOpen] = useState(false);
    const containerRef = useConsolidatedRef(ref);
    const buttonRef = useRef(null);
    const formContentRef = useRef(null);
    const closePopover = () => {
        setOpen(false);
        buttonRef.current?.focus();
    };
    useEffect(() => {
        if (open) {
            getFocusables(formContentRef)[0]?.focus();
        }
    }, [open, formContentRef.current]);
    const labelId = `${id}-label`;
    const Comp = (_jsxs(Flex, { as: StyledCompositeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, status: status, disabled: disabled, ref: containerRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, as: StyledInputContainer, children: [_jsx(StyledInputButton, { "data-testid": testIds.control, ...restProps, id: id, disabled: disabled, "aria-haspopup": 'dialog', "aria-describedby": info ? `${id}-info` : undefined, "aria-controls": open ? `${id}-dialog` : undefined, className: createClassName('composite-input', className), readOnly: true, required: required, onClick: () => {
                            if (!disabled) {
                                setOpen(true);
                            }
                        }, onKeyDown: e => {
                            if (e.key === 'Enter') {
                                e.preventDefault();
                                setOpen(true);
                            }
                        }, value: value ?? '', ref: buttonRef }), onClear && value && !open ? (_jsx(Button, { icon: true, variant: 'simple', label: t('clear'), onClick: () => {
                            onClear();
                            buttonRef.current?.focus();
                        }, disabled: disabled, children: _jsx(Icon, { name: 'times' }) })) : (_jsx(Button, { icon: true, variant: 'simple', onClick: () => {
                            setOpen(!open);
                        }, onMouseDown: (e) => {
                            e.preventDefault();
                        }, "aria-label": t(open ? 'composite_input_close_button_a11y' : 'composite_input_open_button_a11y'), disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }) }))] }), open && containerRef.current && (_jsx(FormDialog, { arrow: false, "aria-label": label, target: containerRef.current, placement: 'bottom-start', onCancel: () => onCancel({ close: closePopover }), onSubmit: {
                    text: t('apply'),
                    handler: () => onApply({ close: closePopover })
                }, id: `${id}-dialog`, children: _jsx(Flex, { container: { direction: 'column' }, ref: formContentRef, children: _jsx(Renderer, { ...rendererProps }) }) }))] }));
    return label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, labelId: labelId, additionalInfo: additionalInfo, children: Comp })) : (Comp);
}), getCompositeInputTestIds);
//# sourceMappingURL=CompositeInput.js.map