import {Item, useListModel} from '@workday/canvas-kit-react/collection';
import {createElemPropsHook} from '@workday/canvas-kit-react/common';

/**
 * This elemProps hook allows for children values to be considered identifiers if the children are
 * strings. This can be useful for autocomplete or select components that allow string values. This
 * hook must be passed _after_ {@link useListItemRegister} because this hook sets the `data-id`
 * attribute if one hasn't been defined by the application.
 *
 * An example might look like:
 *
 * ```tsx
 * const useMyListItem = composeHooks(
 *   // any other hooks here
 *   useListItemSelect,
 *   useListItemRegister,
 *   useListItemAllowChildStrings // always the last in the list
 * )
 *
 *
 * <MyList onSelect={({id}) => {
 *   console.log(id) // will be "First" or "Second"
 * }}>
 *   <MyList.Item>First</MyList.Item>
 *   <MyList.Item>Second</MyList.Item>
 * </MyList>
 * ```
 */
export const useListItemAllowChildStrings = createElemPropsHook(useListModel)((
  _,
  __,
  elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}
) => {
  const props: {'data-id'?: string} = {};
  if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
    props['data-id'] = elemProps.children;
  }

  return props;
});