import { useContext } from 'react';
import SwitchComp, { type SwitchProps } from '../../switch';
import { useListItemControl } from '../useListItemControl';
import { ListItemContext } from '../ListItemContext';

export type ListItemSwitchProps = Omit<
  SwitchProps,
  'disabled' | 'id' | 'aria-labelledby' | 'aria-label'
>;

/**
 * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the
 * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--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---switch) for details.
 */
export const Switch = function (props: ListItemSwitchProps) {
  const { baseItemProps } = useListItemControl('switch', { ...props });
  const { ids, describedByIds } = useContext(ListItemContext);

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

Switch.displayName = 'ListItem.Switch';