import { Select } from '../Select';
import { observer } from 'mobx-react';
import { SpeechCreateParams } from 'openai/resources/audio/speech.mjs';

/**
 * The props for the AiVoiceSelector component
 */
interface AiVoiceSelectorProps {
  /**
   * The id of the select component
   */
  value: string;
  /**
   * A function that is called when the selected voice changes.
   * @param value the value of the selected voice
   * @returns
   */
  onSelectionChange: (value: SpeechCreateParams['voice']) => void;
}

/**
 * A select component for selecting an AI voice.
 * This is to be used with the OpenAI library.
 */
export const AiVoiceSelector = observer((props: AiVoiceSelectorProps) => {
  const { value, onSelectionChange } = props;
  const voices: SpeechCreateParams['voice'][] = [
    'alloy',
    'echo',
    'fable',
    'onyx',
    'nova',
    'shimmer'
  ];

  return (
    <Select
      options={voices.map((voice) => ({ label: voice, value: voice }))}
      size="s"
      id="voice-selector"
      value={value}
      onChange={(value) => {
        onSelectionChange(value as SpeechCreateParams['voice']);
      }}
    />
  );
});