import UserCamera from "./ui/UserCamera";
import UserDevicesControls from "./ui/UserDevicesControls";
import DraggableContainer from "./DraggableContainer";
import { useWebRTC } from "../hooks/useWebRTC";

interface SessionUsersPanel2Props {
  roomId: string;
  autoJoin?: boolean;
}

function SessionUsersPanel2({
  roomId,
  autoJoin = false,
}: SessionUsersPanel2Props) {
  const {
    localStream,
    participants,
    isAudioMuted: isLocalAudioMuted,
    isVideoMuted: isLocalVideoMuted,
    toggleAudio,
    toggleVideo,
  } = useWebRTC(roomId, autoJoin);

  const hasLocalStream = localStream !== null;

  return (
    <DraggableContainer
      enableSnapping={true}
      autoAlign={true}
      initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
      padding="1.111vw"
      className="flex gap-4 z-[999]"
    >
      {/* Локальная камера пользователя */}
      <UserCamera
        name="Вы"
        isSpeaking={false}
        isMuted={isLocalAudioMuted}
        isVideoOff={isLocalVideoMuted}
        isControlDisabled={false}
        isAdmin={true}
        isLocal={true}
        mediaStream={localStream}
        onMute={toggleAudio}
        onVideoOff={toggleVideo}
        onCanControl={() => console.log("Toggle control")}
      />

      {/* Камеры удаленных участников */}
      {participants.map((participant) => (
        <UserCamera
          key={participant.id}
          name={participant.id}
          isSpeaking={false}
          isMuted={false}
          isVideoOff={false}
          isControlDisabled={true}
          isAdmin={true} // Локальный пользователь - админ своей сессии
          mediaStream={participant.stream}
          onMute={() => console.log(`Mute user ${participant.id}`)}
          onVideoOff={() => console.log(`Video off user ${participant.id}`)}
          onCanControl={() => console.log(`Can control user ${participant.id}`)}
        />
      ))}

      <UserDevicesControls
        toggleAudio={toggleAudio}
        toggleVideo={toggleVideo}
        isAudioMuted={isLocalAudioMuted}
        isVideoMuted={isLocalVideoMuted}
        hasLocalStream={hasLocalStream}
      />
    </DraggableContainer>
  );
}

export default SessionUsersPanel2;