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

export interface VoiceSpeedSelectorProps
  extends ApphouseComponent<SelectStyles> {
  utterance: Utterance;
  textToSpeech: TextToSpeech;
  variant?: keyof ButtonStyleVariant;
  size?: keyof BoxSizeStyles;
}
export const VoiceSpeedSelector: React.FC<VoiceSpeedSelectorProps> = observer(
  (props) => {
    const { utterance, textToSpeech, variant, size } = props;
    const utteranceId = utterance.id;
    return (
      <Select
        id={`SpeechSynthesisPlayer-${utteranceId}-rate-selector`}
        variant={variant}
        value={utterance.rate.toString()}
        options={[
          { label: '0.5x', value: '0.5' },
          { label: '0.75x', value: '0.75' },
          { label: '1x', value: '1' },
          { label: '2x', value: '2' },
          { label: '3x', value: '3' }
        ]}
        onChange={function (value: string): void {
          textToSpeech.setRate(utteranceId, parseFloat(value));
        }}
        size={size}
        styleOverwrites={mergeStyles(
          {
            select: {
              width: '100px'
            }
          },
          props.styleOverwrites
        )}
      />
    );
  }
);