import React, { useState, useEffect } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import { toast } from "react-toastify";
import MicIcon from "@material-ui/icons/Mic";
import TextField from "@material-ui/core/TextField";

import line1 from "../../assets/icons/line1.png";
import line2 from "../../assets/icons/line2.png";
import arrowLeft from "../../assets/icons/arrow-left.png";

import "./Vocal.scss";
import { stat } from "fs";

const Vocal = (props: any) => {
  const { transcript, resetTranscript } = useSpeechRecognition();
  const [flag, setFlag] = useState(false);
  const [pause, setPause] = useState(false);

  const start = () => {
    setPause(false);
    SpeechRecognition.startListening({ language: "fa_IR" });
    setTimeout(() => {
      if (true) {
        SpeechRecognition.stopListening();
        setPause(true);
      }
    }, 7000);
  };

  useEffect(() => {
    if (!flag) {
      resetTranscript();
      setFlag(() => true);
      start();
    }
  });

  useEffect(() => {
    props.setInputValue(() => transcript);
  }, [transcript]);

  return (
    <div className="vocal-modal d-flex">
      <img src={arrowLeft} className="vocal-modal__back" onClick={() => props.setVocal(false)} />
      <div className="vocal-modal__content d-flex flex-column">
        <div className="vocal-modal__content--toggle d-flex justify-content-center aling-items-center">
          <img src={line2} onClick={(e) => start()} />
          <img
            src={line1}
            style={{ transform: "translateX(5px)" }}
            onClick={(e) => start()}
          />
        </div>
        <div className="vocal-modal__content--input">
          {pause ? (
            <h2>
              چیزی نشنیدیم :(
              <br />
              روی آیکن موج بزنید تا دوباره امتحان کنید.
            </h2>
          ) : (
            <h1>در حال گوش کردن ...</h1>
          )}
        </div>
      </div>
    </div>
  );
};
export default Vocal;
