import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { CircleIcon } from "lucide-react";
import { type ComponentRef, forwardRef, type ReactElement } from "react";
import { useThemedVariants } from "../../theme/use-themed-variants/use-themed-variants.js";
import { cn } from "../../utils/cn/cn.js";
import type {
    RadioGroupItemProps,
    RadioGroupProps,
} from "./radio-group.types.js";
import {
    radioGroupItemVariants,
    radioGroupVariants,
} from "./radio-group.variants.js";

/**
 * `<RadioGroup>` — chassis radio-group container built on
 * `@radix-ui/react-radio-group`.
 *
 * Radix supplies the a11y semantics (`role="radiogroup"`, roving
 * tabindex across items, arrow-key navigation, native `Space`
 * activation, controlled `value` propagation). The chassis layers a
 * vertical-stack flex/gap layout via cva.
 *
 * Per shadcn convention, items always sit inside the group via
 * `<RadioGroupItem>`; rendering an item without a group is
 * unsupported.
 */
export const RadioGroup = forwardRef<
    ComponentRef<typeof RadioGroupPrimitive.Root>,
    RadioGroupProps
>(function RadioGroup(props, ref): ReactElement {
    const { className, ...rest } = props;

    const variants = useThemedVariants("RadioGroup", radioGroupVariants);
    const classes = cn(variants(), className);

    return <RadioGroupPrimitive.Root ref={ref} className={classes} {...rest} />;
});

RadioGroup.displayName = "RadioGroup";

/**
 * `<RadioGroupItem>` — single radio inside `<RadioGroup>`. Renders a
 * Radix Item containing the circular indicator (`<CircleIcon>` filled
 * with the current text colour) when checked.
 *
 * Refs are forwarded to the Radix Item (the rendered `<button>`).
 */
export const RadioGroupItem = forwardRef<
    ComponentRef<typeof RadioGroupPrimitive.Item>,
    RadioGroupItemProps
>(function RadioGroupItem(props, ref): ReactElement {
    const { className, size, ...rest } = props;

    const variants = useThemedVariants(
        "RadioGroupItem",
        radioGroupItemVariants
    );
    const classes = cn(variants({ size }), className);

    return (
        <RadioGroupPrimitive.Item ref={ref} className={classes} {...rest}>
            <RadioGroupPrimitive.Indicator
                className="flex items-center justify-center"
                data-icon="indicator"
            >
                <CircleIcon
                    className="h-2 w-2 fill-current text-current"
                    data-icon="dot"
                />
            </RadioGroupPrimitive.Indicator>
        </RadioGroupPrimitive.Item>
    );
});

RadioGroupItem.displayName = "RadioGroupItem";

export { radioGroupItemVariants, radioGroupVariants };