import { Checkbox as ArkCheckbox } from '@ark-ui/react';
import { FC } from 'react';
import { CheckboxSizes } from '../../components/constants';
import { Size } from '../../components/types';
import { CheckedState } from '../../types/checkbox';
import { twx } from '../../utils';

interface RememberCheckboxProps {
  label?: string;
  size?: Size;
  checked?: CheckedState;
  disabled?: boolean;
  inverted?: boolean;
  autoFocus?: boolean;
  onChange?: (checked: CheckedState) => void;
}
export const RememberCheckbox: FC<RememberCheckboxProps> = ({
  label,
  size = 'md',
  disabled = false,
  inverted = false,
  checked,
  autoFocus,
  onChange,
}) => {
  const icon =
    checked == 'indeterminate'
      ? 'i-mdi-minus-thick'
      : checked == true
        ? 'i-mdi-check-bold'
        : null;

  const color =
    checked == true
      ? 'text-white'
      : disabled
        ? inverted
          ? 'dark:text-black/30 text-white/30'
          : 'text-black/30 dark:text-white/30'
        : inverted
          ? 'dark:text-black/80 text-white/80'
          : 'text-black/70 dark:text-white/80';

  return (
    <ArkCheckbox.Root
      className="flex items-center gap-2"
      checked={checked}
      onCheckedChange={
        onChange ? ({ checked }) => onChange(checked) : undefined
      }
      disabled={disabled}
      autoFocus={autoFocus}
    >
      <ArkCheckbox.Control
        className={twx([
          CheckboxSizes.get(size),
          checked == true
            ? 'bg-sky-500 border-sky-500'
            : 'border-black/20 bg-white dark:bg-zinc-600 dark:border-white/20',
          'rounded border-1  transition-all',
          disabled &&
            'bg-gray-200 border-black/10 dark:bg-zinc-500 dark:border-white/20',
        ])}
      >
        <div className={twx([icon, color, 'w-full h-full'])} />
      </ArkCheckbox.Control>
      <ArkCheckbox.Label className="text-black">{label}</ArkCheckbox.Label>
      <ArkCheckbox.HiddenInput />
    </ArkCheckbox.Root>
  );
};
