import { observer } from 'mobx-react';
import React from 'react';
import { TextToSpeech } from '../../models/TextToSpeech';
import { View } from '../View';
import { PlayPauseButton } from './PlayPauseButton';
import { VoiceSelector } from './VoiceSelector';
import { VoiceSpeedSelector } from './VoiceSpeedSelector';
import { PlayPauseButtonSize } from '../media/PlayPauseButton';
import {
  BoxSizeStyles,
  ButtonStyleVariant
} from '../../styles/defaults/themes.interface';

interface SpeechSynthesisPlayerProps {
  /**
   * The text to speech model instance
   */
  textToSpeech: TextToSpeech;
  /**
   * The id of the utterance to play
   */
  utteranceId: string;
  /**
   * The size of the play button icon
   * @default medium
   */
  iconSize?: PlayPauseButtonSize;
  /**
   * If true, the language selector will be shown
   * @default false
   * @optional
   */
  showLanguageSelector?: boolean;
  /**
   * If true, the rate selector will be shown
   * @default false
   * @optional
   */
  showRateSelector?: boolean;
  /**
   * The size of selector
   * @default medium
   */
  size?: keyof BoxSizeStyles;
  /**
   * The variant of the selector
   */
  variant?: keyof ButtonStyleVariant;
}

/**
 * A play and pause button for the speech synthesis
 */
export const SpeechSynthesisPlayer: React.FC<SpeechSynthesisPlayerProps> =
  observer((props: SpeechSynthesisPlayerProps) => {
    const {
      textToSpeech,
      utteranceId,
      iconSize,
      showLanguageSelector = false,
      showRateSelector = false,
      variant,
      size = 's'
    } = props;
    const utterance = textToSpeech.utterances.get(utteranceId);
    if (!utterance) {
      return null;
    }
    return (
      <View>
        <PlayPauseButton
          utterance={utterance}
          textToSpeech={textToSpeech}
          size={iconSize}
        />
        {showLanguageSelector && (
          <VoiceSelector
            variant={variant}
            size={size}
            utterance={utterance}
            textToSpeech={textToSpeech}
          />
        )}
        {showRateSelector && (
          <VoiceSpeedSelector
            size={size}
            variant={variant}
            utterance={utterance}
            textToSpeech={textToSpeech}
          />
        )}
      </View>
    );
  });