"use client";

import * as React from "react";
import { Checkbox as KumoCheckbox, type CheckboxProps as KumoCheckboxProps } from "@cloudflare/kumo/components/checkbox";

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

type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
};

export function Checkbox({
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  checked,
  className,
  defaultChecked = false,
  label,
  name,
  onCheckedChange,
  ...props
}: CheckboxProps): React.ReactElement {
  const generatedId = React.useId().replace(/:/g, "");
  const labelId = label ? `teatea-checkbox-label-${generatedId}` : undefined;
  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
  const isControlled = checked !== undefined;
  const currentChecked = isControlled ? checked : uncontrolledChecked;

  return (
    <span className="teatea-checkbox">
      <KumoCheckbox
        aria-label={label ? undefined : ariaLabel}
        aria-labelledby={ariaLabelledBy ?? labelId}
        checked={currentChecked}
        className={cn("teatea-checkbox-control", className)}
        onCheckedChange={(nextChecked) => {
          const booleanValue = Boolean(nextChecked);
          if (!isControlled) {
            setUncontrolledChecked(booleanValue);
          }
          onCheckedChange?.(booleanValue);
        }}
        {...props}
      />
      {label ? (
        <span className="min-w-0 flex-1" id={labelId}>
          {label}
        </span>
      ) : null}
      {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
    </span>
  );
}