import { useContext } from 'react';
import { Sentiment } from '../../common';
import { ListItemContext, type ListItemContextData } from '../ListItemContext';
import { InlinePrompt, type InlinePromptProps } from '../../prompt';

export type ListItemPromptProps = Pick<
  InlinePromptProps,
  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
>;

/**
 * This component allows for rendering an Inline Prompt. <br />
 * In the future it will be a thin wrapper around a standalone component.<br />
 *
 * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
 */
export const Prompt = ({
  sentiment = Sentiment.NEUTRAL,
  mediaLabel,
  children,
  media,
  loading,
}: ListItemPromptProps) => {
  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);

  return (
    <InlinePrompt
      id={ids.prompt}
      sentiment={sentiment}
      media={media}
      loading={loading}
      mediaLabel={mediaLabel}
      muted={isLongLivedMuted}
      className="wds-list-item-prompt"
    >
      {isLongLivedMuted ? props.disabledPromptMessage : children}
    </InlinePrompt>
  );
};

Prompt.displayName = 'ListItem.Prompt';