"use client";

import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

import * as CheckboxPrimitive from "@radix-ui/react-checkbox";

import { cn } from "../../lib/utils";
import { MinusIcon, CheckIcon } from "@astraicons/react/linear";

const checkboxVariants = cva(
  "peer shrink-0 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:data-[state=checked]:ring-primary-400 focus-visible:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-grayscale-surface hover:bg-grayscale-surface-hover data-[state=checked]:bg-primary-500 hover:data-[state=checked]:bg-primary-600 data-[state=indeterminate]:bg-primary-500 hover:data-[state=indeterminate]:bg-primary-600",
        outline:
          "outline outline-2 focus-visible:ring-offset-0 outline-grayscale-border hover:outline-grayscale-border-hover data-[state=checked]:outline-primary-border hover:data-[state=checked]:outline-primary-border-hover data-[state=indeterminate]:outline-primary-border hover:data-[state=indeterminate]:outline-primary-border-hover",
      },
      error: {
        true: "data-[state=unchecked]:border-[3px] border-error-surface-light hover:border-error-surface-dark data-[state=indeterminate]:border-[3px]",
        false: "",
      },
      size: {
        sm: "size-6 rounded-lg",
        md: "size-8 rounded-xl",
        lg: "size-10 rounded-2xl",
      },
    },
    defaultVariants: {
      variant: "default",
      error: false,
      size: "md",
    },
  }
);

export interface CheckboxProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "variant">,
    VariantProps<typeof checkboxVariants> {
  indeterminate?: boolean;
}

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ variant, error, size, className, indeterminate, ...props }, ref) => {
  // state for controlling checked, indeterminate, and unchecked states
  const [checked, setChecked] = React.useState<
    boolean | "indeterminate" | undefined
  >(indeterminate ? "indeterminate" : false);

  return (
    <CheckboxPrimitive.Root
      ref={ref}
      className={cn(checkboxVariants({ variant, error, size }), className)}
      {...props}
      checked={checked}
      onCheckedChange={setChecked}
    >
      <CheckboxPrimitive.Indicator
        className={cn("flex items-center justify-center text-current")}
      >
        {checked === true && (
          <CheckIcon
            strokeWidth={2}
            className={cn(
              variant === "outline"
                ? "size-6 text-primary-surface hover:text-primary-700"
                : "size-6 text-white hover:text-neutral-100"
            )}
          />
        )}
        {checked === "indeterminate" && (
          <MinusIcon
            strokeWidth={2}
            className={cn(
              variant === "outline"
                ? "size-6 text-primary-surface hover:text-primary-700"
                : "size-6 text-white hover:text-neutral-100"
            )}
          />
        )}
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
});
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

const CheckboxBase = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ variant, error, size, className, children, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(checkboxVariants({ variant, error, size }), className)}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      {children}
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
));
CheckboxBase.displayName = CheckboxPrimitive.Root.displayName;

export { Checkbox, CheckboxBase };
Components
