lti-web-client/src/components/input/CheckboxInput.tsx

'use client';

import { HTMLProps, useEffect, useRef } from 'react';
import { cn } from '@/lib/helper';
import { Size } from '@/types/theme';

interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
  name: string;
  label?: string;
  indeterminate?: boolean;
  classNames?: {
    wrapper?: string;
    inputWrapper?: string;
    checkbox?: string;
    label?: string;
  };
  isError?: boolean;
  isValid?: boolean;
  errorMessage?: string;
  size?: Size;
}

const CheckboxInput = ({
  indeterminate,
  name,
  label,
  className,
  classNames,
  isValid,
  isError,
  errorMessage,
  size = 'sm',
  ...rest
}: CheckboxInputProps) => {
  const ref = useRef<HTMLInputElement>(null!);

  const checkboxBaseClassName = cn('checkbox cursor-pointer rounded-md', {
    'checkbox-xs': size === 'xs',
    'checkbox-sm': size === 'sm',
    'checkbox-md': size === 'md',
    'checkbox-lg': size === 'lg',
    'checkbox-xl': size === 'xl',
  });

  useEffect(() => {
    if (typeof indeterminate === 'boolean') {
      ref.current.indeterminate = !rest.checked && indeterminate;
    }
  }, [ref, indeterminate]);

  return (
    <div
      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
    >
      <div
        className={cn(
          'flex flex-row justify-center items-center gap-2',
          classNames?.inputWrapper
        )}
      >
        <input
          type='checkbox'
          ref={ref}
          id={name}
          name={name}
          className={cn(
            checkboxBaseClassName,
            {
              'border-error': isError,
              'border-success': isValid,
            },
            className,
            classNames?.checkbox
          )}
          {...rest}
        />

        {label && (
          <label
            htmlFor={name}
            className={cn(
              'text-inherit',
              {
                'text-error': isError,
                'text-success': isValid,
              },
              classNames?.label
            )}
          >
            {label}
          </label>
        )}
      </div>

      {errorMessage && <span className='text-error'>{errorMessage}</span>}
    </div>
  );
};

export default CheckboxInput;