import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import styled from 'styled-components';
import Icon, { registerIcon } from '../Icon';
import HTML from '../HTML';
import Button from '../Button';
import { InfoDialog } from '../Dialog';
import * as informationIcon from '../Icon/icons/information.icon';
import { useConsolidatedRef, useI18n } from '../../hooks';
import Flex from '../Flex';
registerIcon(informationIcon);
export const StyledAdditionalInfo = styled.div ``;
export default forwardRef(function AdditionalInfo(props, ref) {
    const t = useI18n();
    const { heading = t('additional_info'), contextualLabel, children, dialogHandle, ...restProps } = props;
    const [target, setTarget] = useState(null);
    const buttonRef = useRef(null);
    const handleRef = useConsolidatedRef(dialogHandle);
    useImperativeHandle(handleRef, () => {
        return {
            open: () => {
                setTarget(buttonRef.current);
            },
            close: () => {
                setTarget(null);
            }
        };
    });
    return (_jsxs(Flex, { container: true, as: StyledAdditionalInfo, ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ref: buttonRef, onClick: () => {
                    handleRef.current?.open();
                }, "aria-label": `${t('additional_info')} - ${contextualLabel ?? heading}`, children: _jsx(Icon, { name: 'information' }) }), target && (_jsx(InfoDialog, { heading: heading, target: target, onDismiss: () => {
                    handleRef.current?.close();
                }, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children }))] }));
});
//# sourceMappingURL=AdditionalInfo.js.map