import * as React from "react";

function Client({ isRitzyVerified, selector, lang }) {
  console.log("client:body:isRitzyVerified", isRitzyVerified);

  function Player() {
    return <button onClick={play}>Play (React)</button>;
  }

  const play = () => {
    let text = "";
    const allElements = document.querySelectorAll(selector);
    text += Array.from(allElements).reduce(
      (prev, current) => prev + ", " + current.textContent,
      ""
    );
    console.log(text)
    if ("speechSynthesis" in window) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = lang;
      window.speechSynthesis.speak(utterance);
    }
  };

  return isRitzyVerified ? <Player /> : null;
}

export default Client;