import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { disabled } from '../checkbox/consts';
import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core';
import Icon from '../icon';
import T from '../t';
import { cs, filterUndefined } from '../utils';
import { radioColors } from './consts';
import { useRadioGroupContext } from './context';
const RadioControl = styled.spanBox `
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  transition-duration: fast;
`;
const RadioInput = styled.input `
  cursor: inherit;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
`;
export const RadioBase = styled.labelBox `
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  width: fit-content;

  &:not([aria-disabled='true']):hover .vui-radioControl {
    color: ${p => th.color(p.controlHoverColor)};
  }

  .vui-radioControl:focus-within {
    color: ${radioColors.focus};
  }

  &[aria-disabled='true'] {
    color: ${disabled.text};
    cursor: not-allowed;

    .vui-radioControl {
      color: ${disabled.icon};
    }
  }
`;
/**
 * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
 * Uses icons to display itself in different states.
 */
export const Radio = vui((props, ref) => {
    const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroupContext() ?? {};
    const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
    const mergedProps = { ...radioGroupProps, ...props };
    const { checked = groupValue !== undefined ? props.value === groupValue : undefined, children, className, defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined, disabled, icon: iconProp = 'cuiRadioUnselected', iconChecked = 'cuiRadioSelected', id, inputProps, inputRef, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);
    const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);
    const styles = useStyleConfig('Radio', mergedProps);
    const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
    const icon = isChecked ? iconChecked : iconProp;
    const controlMr = children || label ? 1 : 0;
    const color = isChecked ? radioColors.checked : controlColor;
    const controlHoverColor = hoverColor ? hoverColor : radioColors.hover;
    useEffect(() => {
        if (groupIsChecked !== undefined)
            setIsChecked(groupIsChecked === value);
        else if (checked !== undefined)
            setIsChecked(checked);
    }, [checked, groupIsChecked]);
    function handleOnChange(e) {
        groupOnChange?.(e);
        onChange?.(e);
    }
    const aliasedProps = filterUndefined({
        'aria-disabled': disabled,
    });
    return (_jsxs(RadioBase, { className: cs('vui-radio', className), controlHoverColor: controlHoverColor, ref: ref, ...styles.container, ...aliasedProps, ...rest, children: [_jsxs(RadioControl, { bg: "white", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, ...controlStyles, children: [_jsx(RadioInput, { className: "vui-radioInput", onClick: handleOnChange, ref: inputRef, type: "radio", defaultChecked: checked, disabled, id, name, required, value, ...inputProps }), _jsx(Icon, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })] }), children ??
                (label && (_jsx(T, { className: "vui-radioLabel", lineHeight: "normal", ...styles.label, children: label })))] }));
});
Radio.displayName = 'Radio';
export default Radio;
//# sourceMappingURL=radio.js.map