const Video = ({userMedia}: {userMedia: UserMedia}) => {
  const ref = (video: HTMLVideoElement) => {
    if (video) {
      video.srcObject = userMedia.mediaOut;
      video.muted = true;
    }
  };
  const [vid, setVid] = React.useState(userMedia.isVideoOn);
  const [aud, setAud] = React.useState(userMedia.isAudioOn);

  const toggleAudio = async () => {
    await userMedia.toggleAudio();
    setAud(userMedia.isAudioOn);
  };

  const toggleVideo = async () => {
    await userMedia.toggleVideo();
    setVid(userMedia.isVideoOn);
  };
  return (
    <div className="video-wrapper">
      <video muted={true} id="video_self" ref={ref} autoPlay playsInline />
      <div className="video-controls">
        <button onClick={toggleAudio}>
          <Icon content={aud ? "mic" : "mic_off"} />
        </button>
        <button onClick={toggleVideo}>
          <Icon content={vid ? "videocam" : "videocam_off"} />
        </button>
      </div>
    </div>
  );
};

const Icon = ({content}) => {
  return <div className="material-icons-outlined">{content}</div>;
};