import { observer } from 'mobx-react';
import { TextToSpeech } from '../../models/TextToSpeech';
import {
  PlayPauseButton as MediaPlayPauseButton,
  PlayPauseButtonSize
} from '../media/PlayPauseButton';
import { Utterance } from '../../models/textToSpeech/Utterance';

import React from 'react';

export const PlayPauseButton: React.FC<{
  utterance: Utterance;
  textToSpeech: TextToSpeech;
  /**
   * The size of the icon
   * @default medium
   * @optional
   */
  size?: PlayPauseButtonSize;
}> = observer((props) => {
  const { utterance, textToSpeech, size = 'medium' } = props;

  const isSpeaking =
    textToSpeech.status === 'speaking' && utterance.status === 'speaking';
  return (
    <MediaPlayPauseButton
      isPlaying={isSpeaking}
      size={size}
      onClick={() => {
        if (isSpeaking) {
          textToSpeech.pause();
        } else {
          textToSpeech.speak(utterance.text, utterance.id);
        }
      }}
    />
  );
});