import React from 'react';
import PropTypes from 'prop-types';
import HearingRoundedIcon from '@material-ui/icons/HearingRounded';
import VoiceOverOffIcon from '@material-ui/icons/VoiceOverOff';
import useSpeech from '../hooks/useSpeech';

const SpeakText = props => {
  const {
    text,
    lang
  } = props;
  const {
    speak,
    stop,
    isSpeaking,
    error
  } = useSpeech(text, lang);
  const styles = {
    cursor: 'pointer',
    opacity: 0.5,
    fontSize: '1em',
    display: 'inline-block',
    verticalAlign: 'middle'
  };

  if (error) {
    return /*#__PURE__*/React.createElement("span", {
      title: error
    }, /*#__PURE__*/React.createElement(HearingRoundedIcon, {
      color: "disabled",
      style: { ...styles,
        cursor: 'not-allowed'
      }
    }));
  }

  if (isSpeaking) {
    return /*#__PURE__*/React.createElement(VoiceOverOffIcon, {
      onClick: stop,
      style: styles
    });
  }

  return /*#__PURE__*/React.createElement(HearingRoundedIcon, {
    onClick: speak,
    style: styles
  });
};

SpeakText.propTypes = {
  text: PropTypes.string.isRequired,
  lang: PropTypes.string
};
SpeakText.defaultProps = {
  lang: window.navigator.language
};
export default SpeakText;