import React, { forwardRef, useEffect, useRef, type HTMLProps } from 'react';
import { mergeRefs } from '@wener/reaction';
import classNames from 'clsx';
import type { DaisyModifierProps } from '../utils/daisy';
import { daisy, omit } from '../utils/daisy';

export type CheckboxProps = HTMLProps<HTMLInputElement> & {
  indeterminate?: boolean;
} & Pick<DaisyModifierProps, 'intent' | 'size'>;

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ indeterminate, className, ...props }, _ref) => {
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (typeof indeterminate === 'boolean' && ref.current) {
      ref.current.indeterminate = !props.checked && indeterminate;
    }
  }, [ref, indeterminate]);
  return (
    <input
      type='checkbox'
      ref={mergeRefs(ref, _ref)}
      className={classNames('cursor-pointer', daisy('checkbox', props), className)}
      {...omit(props, ['intent', 'size'])}
    />
  );
});
Checkbox.displayName = 'Checkbox';