import { useContext } from 'react';
import CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';
import { useListItemControl } from '../useListItemControl';
import { ListItemContext } from '../ListItemContext';

export type ListItemCheckboxProps = Pick<
  CheckboxButtonProps,
  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'
>;

/**
 * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the
 * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),
 * but offers only a subset of its features in line with the ListItem's constraints. <br />
 *
 * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.
 */
export const Checkbox = function (props: ListItemCheckboxProps) {
  const { baseItemProps } = useListItemControl('checkbox', { ...props });
  const { ids, describedByIds } = useContext(ListItemContext);

  return (
    <CheckboxButton
      {...props}
      className="wds-list-item-control"
      disabled={baseItemProps.disabled}
      id={ids.control}
      aria-describedby={describedByIds}
    />
  );
};

Checkbox.displayName = 'ListItem.Checkbox';