import {
  useCurrentUID,
  useIsConnected,
  useLocalCameraTrack,
  useLocalMicrophoneTrack,
  usePublish,
  useRemoteUsers,
} from "agora-rtc-react";
import { LocalMicrophoneAndCameraUser } from "./LocalMicrophoneAndCameraUser";
import type { ReactNode } from "react";
import { useMemo } from "react";

import { fakeAvatar, fakeName } from "../../utils/Fake";
import AutoLayout from "./AutoLayout";
import { NameContainer } from "./NameContainer";
import UsersInfo from "./UsersInfo";
import { useAuth } from "../../contexts/authContext";

interface VideoCallRoomProps {
  renderAction?: () => ReactNode;
  renderLocalUser?: () => ReactNode;
  renderRemoteUsers?: () => ReactNode;
  micOn: boolean;
  cameraOn: boolean;
  showUserInfo?: boolean;
}

export function VideoCallRoom({
  micOn,
  cameraOn,
  renderAction,
  renderLocalUser,
  renderRemoteUsers,
  showUserInfo = true,
}: VideoCallRoomProps) {

  const {userData} = useAuth();
  const isConnected = useIsConnected();

  const uid = useCurrentUID() || 0;
  const userName = useMemo(() => fakeName(uid), [uid]);
  const userAvatar = useMemo(() => fakeAvatar(), []);

  const remoteUsers = useRemoteUsers();
  const publishedUsers = remoteUsers.filter(user => user.hasAudio || user.hasVideo);

  const selfPublished = micOn || cameraOn;

  const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
  const { localCameraTrack } = useLocalCameraTrack(cameraOn);
  usePublish([localMicrophoneTrack, localCameraTrack]);

  
  return (
    <>
      {renderAction ? renderAction() : undefined}
      {showUserInfo && (
        <UsersInfo
          published={publishedUsers.length + (selfPublished ? 1 : 0)}
          total={remoteUsers.length + 1}
        />
      )}
      <AutoLayout>
        {isConnected &&
          (renderLocalUser ? (
            renderLocalUser()
          ) : (
            <AutoLayout.Item>
              <LocalMicrophoneAndCameraUser
                audioTrack={localMicrophoneTrack}
                cameraOn={cameraOn}
                cover={userAvatar}
                micOn={micOn}
                videoTrack={localCameraTrack}
              >
                
              </LocalMicrophoneAndCameraUser>
              <NameContainer>
                {userData?.firstname} {userData?.lastname}
            </NameContainer>
            </AutoLayout.Item>
          ))}
        {renderRemoteUsers ? renderRemoteUsers() : undefined}
      </AutoLayout>
    </>
  );
}