export interface CheckboxIconProps {
  'data-checked'?: string;
  isSelected?: boolean;
  isIndeterminate?: boolean;
  isInvalid?: boolean;
  className?: string;
}

function CheckIcon(props: CheckboxIconProps) {
  const { isSelected } = props;

  return (
    <svg aria-hidden="true" role="presentation" viewBox="0 0 17 18">
      <polyline
        fill="none"
        points="1 9 7 14 15 4"
        stroke="currentColor"
        strokeDasharray={22}
        strokeDashoffset={isSelected ? 44 : 66}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        style={
          isSelected
            ? {
                transition: 'stroke-dashoffset 250ms linear 0s',
              }
            : {}
        }
      />
    </svg>
  );
}

function IndeterminateIcon() {
  return (
    <svg stroke="white" strokeWidth={3} viewBox="0 0 24 24">
      <line x1="21" x2="3" y1="12" y2="12" />
    </svg>
  );
}

/**
 * CheckboxIcon is used to visually indicate the checked or indeterminate
 * state of a checkbox.
 */
export function CheckboxIcon(props: CheckboxIconProps) {
  const { isIndeterminate, ...otherProps } = props;
  const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;

  return <BaseIcon {...otherProps} />;
}