import "../sidebar/toolbar.css";
import { useState } from "react";
import { TUserControl } from "../../utils/types";
import { MicroButton } from "../ui/MicroButton/MicroButton";
import iconUser from "../../images/icons/user.svg";
import { PopupUserControlButton } from "../popupUserControlButton/PopupUserControlButton";

export const PopupUserControl: React.FC<TUserControl> = ({
  user,
  isAdmin,
  sendControlRequest,
  localUser,
  handleControl,
  setNotification,
  handleReturnControl,
  setMuted,
  isMuted,
}) => {
  const handleMuteUser = () => {
    const element = document.getElementById(user.id) as HTMLAudioElement;
    if (isMuted) {
      console.log(element);
      element.volume = 1;
      setMuted(false);
    } else {
      element.volume = 0;
      setMuted(true);
    }
  };

  return (
    <div className="toolbar-open-add-button-container">
      <div className="user-icon">
        <img alt="icon" className="toolbar-icon" src={iconUser}></img>
      </div>
      <MicroButton isMuted={isMuted} onClick={handleMuteUser}></MicroButton>
      <PopupUserControlButton
        handleControl={handleControl}
        localUser={localUser}
        sendControlRequest={sendControlRequest}
        isAdmin={isAdmin}
        setNotification={setNotification}
        user={user}
        handleReturnControl={handleReturnControl}
      ></PopupUserControlButton>
    </div>
  );
};