import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, Children, cloneElement, useState, useEffect, useRef } from 'react';
import styled from 'styled-components';
import FormField from '../FormField';
import { StyledFormField } from '../FormField/FormField';
import Flex from '../Flex';
import { useConsolidatedRef, useElement, useUID } from '../../hooks';
import { getActiveElement } from '../../utils';
const defaultProps = {
    required: false,
    disabled: false
};
export const StyledRadioCheckGroup = styled.fieldset `
  &[disabled] {
    > ${StyledFormField} {
      opacity: unset;
    }
  }
`;
const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
    const uid = useUID();
    const { children, name = uid, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps } = props;
    const [optionsEl, setOptionsEl] = useElement();
    const [renderInline, setRenderInline] = useState(inline);
    const renderInlineRef = useRef(inline);
    const minInlineWidth = useRef(0);
    const containerRef = useConsolidatedRef(ref);
    useEffect(() => {
        setRenderInline(inline);
        if (inline && optionsEl && optionsEl.lastChild && autoStack) {
            const intersectionObserver = new IntersectionObserver(entries => {
                if (entries[0].intersectionRatio < 1) {
                    if (entries[0].rootBounds)
                        minInlineWidth.current = entries[0].rootBounds.width + 1;
                    renderInlineRef.current = false;
                    setRenderInline(false);
                }
            }, { root: optionsEl, threshold: 1 });
            const resizeObserver = new ResizeObserver(entries => {
                if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {
                    renderInlineRef.current = true;
                    setRenderInline(true);
                }
            });
            intersectionObserver.observe(optionsEl.lastChild);
            resizeObserver.observe(optionsEl);
            return () => {
                intersectionObserver.disconnect();
                resizeObserver.disconnect();
            };
        }
    }, [optionsEl, inline, autoStack]);
    return (_jsx(FormField, { as: StyledRadioCheckGroup, labelAs: 'legend', ref: containerRef, name: name, disabled: disabled, ...restProps, 
        // Prevents blur when any input within the group is actively focused.
        onMouseDown: (e) => {
            restProps.onMouseDown?.(e);
            if (!containerRef.current)
                return;
            if (!containerRef.current.contains(getActiveElement()))
                return;
            if (!(e.target instanceof Element) || !e.target.closest('label'))
                return;
            e.preventDefault();
        }, isRadioCheck: true, children: _jsx(Flex, { ref: setOptionsEl, container: {
                direction: renderInline ? 'row' : 'column',
                colGap: 2,
                rowGap: variant === 'card' ? 1 : 0,
                wrap: 'wrap'
            }, children: Children.map(children, child => cloneElement(child, {
                name,
                disabled: disabled || child.props.disabled,
                readOnly: readOnly || child.props.readOnly,
                variant,
                onChange: onChange
                    ? (e) => {
                        if (!(readOnly || child.props.readOnly)) {
                            child.props.onChange?.(e);
                            onChange(e);
                        }
                    }
                    : child.props.onChange
            })) }) }));
});
RadioCheckGroup.defaultProps = defaultProps;
export default RadioCheckGroup;
//# sourceMappingURL=RadioCheckGroup.js.map