import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
import ControlButton from "./ControlButton";
import VideoFilledIcon from "../icons/VideoFilledIcon";
import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon";
import CogFilledIcon from "../icons/CogFilledIcon";
import useModalStore from "../../store/modalStore";
import SettingsModal from "../modals/SettingsModal";

export default function UserDevicesControls() {
  const { setModal } = useModalStore();

  function ToggleAudioDevice() {
    console.log("Mute device");
  }
  function ToggleVideoDevice() {
    console.log("Video device");
  }
  function ToggleCanControl() {
    console.log("Can control device");
  }
  function ToggleSettings() {
    setModal(<SettingsModal />);
  }

  return (
    <div className="hidden 2xl:flex aspect-square p-[0.556vw]  flex-wrap justify-between  items-center size-[6.944vw] rounded-[1.667vw] bg-[#00000040] shadow-[0_4px_40px_0_#0F10111A] backdrop-blur-[10px] pointer-events-auto">
      <ControlButton
        size="large"
        icon={<MicrophoneFilledIcon />}
        onClick={ToggleAudioDevice}
        enabled={true}
      />
      <ControlButton
        size="large"
        icon={<VideoFilledIcon />}
        enabled={true}
        onClick={ToggleVideoDevice}
      />
      <ControlButton
        size="large"
        icon={<HandRaisedFilledIcon />}
        onClick={ToggleCanControl}
        enabled={true}
      />
      <ControlButton
        size="large"
        icon={<CogFilledIcon />}
        enabled={true}
        onClick={ToggleSettings}
      />
    </div>
  );
}