import { Checkbox as BaseCheckbox, CheckboxProps } from "@nextui-org/react";
import { ControllerFieldState } from "react-hook-form";
import { FaExclamationTriangle } from "react-icons/fa";

import { Option } from "@/types/options/options-data-types";

type CheckboxFormProps = {
  fieldProps: any;
  fieldState: ControllerFieldState;
  option: Option;
  forceDarkMode?: boolean;
  control?: any;
  name?: string;
};

type CheckboxComponentProps = CheckboxProps & CheckboxFormProps;

function CheckboxSingle({
  fieldProps,
  fieldState,
  option,
  isInvalid,
  size,
  value,
  forceDarkMode,
  classNames = {
    base: forceDarkMode ? "dark:text-white" : "text-black",
    wrapper: "",
    icon: "",
    label: `text-sm font-noto ${
      fieldState.invalid || isInvalid ? "text-black" : ""
    }`,
  },
  onChange,
}: CheckboxComponentProps) {
  return (
    <div>
      <BaseCheckbox
        {...fieldProps}
        aria-describedby={fieldProps?.name}
        aria-labelledby={fieldProps.name}
        classNames={classNames}
        color="default"
        id={fieldProps?.name}
        isInvalid={fieldState.invalid ?? isInvalid}
        name={fieldProps.name}
        radius="sm"
        size={size}
        value={fieldProps.value ?? value}
        onChange={fieldProps.onChange ?? onChange}
      >
        {option.title}
      </BaseCheckbox>
      {/* checkbox doesn't expose a prop like errorMessage. it needs to be created manually. */}
      {fieldState.error && (
        <div className="font-inter font-regular text-[12px] mt-3 leading-tight flex text-red-800 font-semibold">
          <FaExclamationTriangle className="me-1 my-auto size-3" />
          {fieldState.error.message}
        </div>
      )}
    </div>
  );
}

export default CheckboxSingle;