"use client";

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";

import { cn } from "./cn";

export interface CheckboxProps
  extends Omit<CheckboxPrimitive.Root.Props, "className"> {
  className?: string;
}

function Checkbox({ className, children, ...props }: CheckboxProps) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "inline-flex size-(--checkbox-size) shrink-0 items-center justify-center",
        "rounded-(--checkbox-radius) border border-(color:--color-border)",
        "bg-(color:--input-background) text-(color:--color-brand-accent-content)",
        "transition-[border-color,background-color,outline-color]",
        "duration-(--motion-duration) ease-(--motion-ease)",
        "outline-none focus-visible:outline-solid",
        "focus-visible:outline-(length:--focus-ring-width)",
        "focus-visible:outline-(color:--color-focus-ring)",
        "focus-visible:outline-offset-2",
        "data-checked:border-(color:--color-brand-accent)",
        "data-checked:bg-(color:--color-brand-accent)",
        "data-indeterminate:border-(color:--color-brand-accent)",
        "data-indeterminate:bg-(color:--color-brand-accent)",
        "aria-invalid:border-(color:--color-action-danger)",
        "aria-invalid:focus-visible:outline-(color:--color-action-danger)",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className,
      )}
      {...props}
    >
      {children ?? (
        <CheckboxPrimitive.Indicator
          data-slot="checkbox-indicator"
          className="flex items-center justify-center text-current"
          render={(indicatorProps, state) => (
            <span {...indicatorProps}>
              {state.indeterminate ? <MinusIcon /> : <CheckIcon />}
            </span>
          )}
        />
      )}
    </CheckboxPrimitive.Root>
  );
}

function CheckIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" className="size-3.5" fill="none">
      <path
        d="m3 8.5 3.1 3.1L13 4.7"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function MinusIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" className="size-3.5" fill="none">
      <path d="M3 8h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

export { Checkbox };