/* eslint-disable jsx-a11y/label-has-associated-control */

"use client";

import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import type { VariantProps } from "class-variance-authority";
import { Circle } from "lucide-react";
import { forwardRef } from "react";

import { cn } from "@/libs/utils";

import {
  circleVariant,
  labelVariants,
  radioVariants,
} from "./radio-group.variants";

export interface RadioGroupProps
  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
    VariantProps<typeof radioVariants>,
    VariantProps<typeof labelVariants> {
  label?: string;
  children?: React.ReactNode;
  id?: string;
}

const RadioGroup = forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("flex", className)}
      {...props}
      ref={ref}
    />
  );
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupProps>(
  (
    { className, variant, size, label, labelTextSize, children, id, ...props },
    ref,
  ) => {
    return (
      <div className="flex  items-center gap-1">
        <RadioGroupPrimitive.Item
          ref={ref}
          id={id}
          className={cn(
            radioVariants({
              variant,
              size,
              className,
            }),
          )}
          {...props}
        >
          <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-primary-500">
            <Circle
              className={cn(
                circleVariant({
                  circleSize: size,
                  className,
                }),
              )}
            />
          </RadioGroupPrimitive.Indicator>
        </RadioGroupPrimitive.Item>
        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
        {children ? (
          <div>{children}</div>
        ) : (
          <label
            htmlFor={id}
            className={cn(
              labelVariants({
                labelTextSize,
                className,
              }),
            )}
          >
            {label}
          </label>
        )}
      </div>
    );
  },
);
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { RadioGroup, RadioGroupItem };