import type { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
import { Checkbox as AriaCheckbox, composeRenderProps } from 'react-aria-components';

import { tv } from 'tailwind-variants';

const checkbox = tv({
  base: 'inline-flex items-center gap-2 text-sm font-medium leading-7',
  variants: {
    isDisabled: {
      true: 'text-dabeeo-gray-be',
    },
  },
});

const box = tv({
  base: 'w-4 h-4 box-border shrink-0 flex items-center justify-center text-white border border-dabeeo-gray-be transition',
  variants: {
    isSelected: {
      true: 'bg-primary border-primary',
    },
    isDisabled: {
      true: 'text-dabeeo-gray-99 bg-dabeeo-gray-eb border-dabeeo-gray-be cursor-not-allowed',
    },
    isFocusVisible: {
      true: 'ring-2 ring-offset-2 ring-primary',
    },
  },
  compoundVariants: [],
});

export const Checkbox = (props: AriaCheckboxProps) => {
  const { className, children, ...restProps } = props;
  return (
    <AriaCheckbox
      className={composeRenderProps(className, (className, renderProps) => checkbox({ ...renderProps, className }))}
      {...restProps}
    >
      {composeRenderProps(children, (children, { isSelected, isIndeterminate, ...renderProps }) => (
        <>
          <div className={box({ isSelected: isSelected || isIndeterminate, ...renderProps })}>
            {isIndeterminate ? (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M5 12h14" />
              </svg>
            ) : isSelected ? (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 7.00893L7.85714 10.625L13 5" stroke="currentColor" strokeWidth="2" />
              </svg>
            ) : null}
          </div>
          {children}
        </>
      ))}
    </AriaCheckbox>
  );
};