import React, { useEffect, useRef } from "react";
import { v4 as uuidv4 } from "uuid";

interface CheckboxProps {
  type?: "checkbox";
  checked: boolean;
  disabled?: boolean;
  onChange: (checked: boolean) => void;
  indeterminate?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const Checkbox = ({
  checked = false,
  disabled = false,
  onChange = () => {},
  indeterminate = false,
  className,
  style,
  ...props
}: CheckboxProps) => {
  const id = uuidv4();
  const [check, setCheck] = React.useState<boolean>(checked);
  const ref = useRef(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const isChecked = e.target.checked;
    setCheck(isChecked);

    if (onChange) onChange(isChecked);
  };

  useEffect(() => {
    setCheck(checked);
  }, [checked]);

  useEffect(() => {
    if (ref.current) {
      (ref.current as HTMLInputElement).indeterminate = indeterminate;
    }
  }, [indeterminate]);

  return (
    <input
      id={id}
      ref={ref}
      type="checkbox"
      checked={check}
      onChange={handleChange}
      disabled={disabled}
      className={className}
      {...props}
    />
  );
};

export default Checkbox;