import React from 'react';
import { Utterance } from '../../models/textToSpeech/Utterance';
import { Select, TextToSpeech } from '../..';
import { observer } from 'mobx-react';
import {
  BoxSizeStyles,
  ButtonStyleVariant
} from '../../styles/defaults/themes.interface';

export interface VoiceSelectorProps {
  utterance: Utterance;
  textToSpeech: TextToSpeech;
  variant?: keyof ButtonStyleVariant;
  size?: keyof BoxSizeStyles;
}
export const VoiceSelector: React.FC<VoiceSelectorProps> = observer((props) => {
  const { utterance, textToSpeech, variant, size } = props;
  const utteranceId = utterance.id;
  const selectedVoiceIndex = textToSpeech.selectedVoiceIndex.toString();
  const voiceOptions = textToSpeech.voices.map((voice) => {
    return {
      label: `${voice.label}`,
      value: voice.value.toString()
    };
  });
  if (voiceOptions.length === 0) {
    return null;
  }
  return (
    <Select
      id={`SpeechSynthesisPlayer-${utteranceId}-language-selector`}
      disabled={false}
      variant={variant}
      value={selectedVoiceIndex}
      onChange={(value) => {
        textToSpeech.setSelectedVoiceIndex(parseInt(value));
        const voice = textToSpeech.voices[parseInt(value)];
        textToSpeech.setVoice(utteranceId, voice.details);
      }}
      size={size}
      options={voiceOptions}
      styleOverwrites={{
        select: {
          width: '200px'
        }
      }}
    />
  );
});