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

export interface UserDevicesControlsProps {
  toggleAudio: () => void;
  toggleVideo: () => void;
  isAudioMuted: boolean;
  isVideoMuted: boolean;
  hasLocalStream?: boolean;
  mode?: "full" | "mini";
}

export default function UserDevicesControls({
  toggleAudio,
  toggleVideo,
  isAudioMuted,
  isVideoMuted,
  hasLocalStream = true,
  mode = "full",
}: UserDevicesControlsProps) {
  const { setModal } = useModalStore();

  function ToggleSettings() {
    setModal(<SettingsModal />);
  }

  return (
    <div
      className={clsx(
        mode === "mini"
          ? "hidden order-last 2xl:grid grid-cols-2 gap-[0.278vw] 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"
          : "2xl:flex hidden items-center gap-[0.278vw] p-[0.556vw] rounded-[1.667vw] ring-[0.104vw] ring-[#FFFFFF]/15 absolute bottom-[0.556vw] left-1/2 -translate-x-1/2 bg-[#00000040] backdrop-blur-[10px]"
      )}
    >
      <ControlButton
        onMouseDown={(e) => e.stopPropagation()}
        size="large"
        icon={
          isAudioMuted || !hasLocalStream ? (
            <MicrophoneOffFilledIcon />
          ) : (
            <MicrophoneFilledIcon />
          )
        }
        disabled={!hasLocalStream}
        onClick={toggleAudio}
      />
      <ControlButton
        onMouseDown={(e) => e.stopPropagation()}
        size="large"
        icon={
          isVideoMuted || !hasLocalStream ? (
            <VideoOffFilledIcon />
          ) : (
            <VideoFilledIcon />
          )
        }
        disabled={!hasLocalStream}
        onClick={toggleVideo}
      />
      <ControlButton
        onMouseDown={(e) => e.stopPropagation()}
        size="large"
        icon={<HandRaisedFilledIcon />}
        onClick={() => console.log("Toggle can control")}
      />
      <ControlButton
        onMouseDown={(e) => e.stopPropagation()}
        size="large"
        icon={<CogFilledIcon />}
        onClick={ToggleSettings}
      />
    </div>
  );
}
