import AgoraRTC, {
  LocalUser,
  RemoteUser,
  useIsConnected,
  useJoin,
  useLocalMicrophoneTrack,
  useLocalCameraTrack,
  usePublish,
  useRemoteUsers,
  IAgoraRTCRemoteUser,
  useRTCClient,
  useRemoteAudioTracks,
  useRemoteVideoTracks,
  useRemoteUserTrack,
} from "agora-rtc-react";
import AgoraRTM, { RtmChannel } from "agora-rtm-sdk"
import { useContext, useEffect, useState } from "react";

//import "./styles.css";
import tnilogo from "../../assets/logos/tnilogo.png";
import MeetingService from "../../services/MeetingService";
import AuthContext, { useAuth } from "../../contexts/authContext";
import Button from "../bootstrap/Button";
import Icon from "../icon/Icon";
import { IUserProps } from "../../common/data/userDummyData";

const agoraProps = {
  appId: "d18a08b5b9384c3795a9c0d11c7362b1",
  appCertificate: "38400d36d7484320a4c01881ef0356a8",
  channelName : '1billionminutes',
  uid: 9254,
  generatedToken: "007eJxTYHCsmyY4x8d5msiRq+HRK2+8YJDTmat1qSDJ6eKh68sWcukpMKQYWiQaWCSZJlkaW5gkG5tbmiZaJhukGBommxubGSUZJpXtTmsIZGRYdH0nKyMDBIL4/AyGSZk5OZn5ebmZeaUlqcUMDAB5AiNz",
  token: "007eJxTYPgRuOdSlT1zTNuuJJs+6Td/W0IeWV3ZUji/5aa9gvS1da8VGFIMLRINLJJMkyyNLUySjc0tTRMtkw1SDA2TzY3NjJIMJRM2pQnwMTDYrzvJyMjAyMACxCA+E5hkBpMsYJKfoSQvU7egKLEytUi3KD8/l4XB0sjUBAC54SSZ"
}

interface IRemoteParticipantsProps {
  participants: IAgoraRTCRemoteUser[]
}

type Particip = {
  part:IAgoraRTCRemoteUser,
  fullname: string
}

const RemoteParticipants =  ({ participants }: IRemoteParticipantsProps) => {
  const [list, setList] = useState<any[]>();

  const getFullname: any = async (uid: number) => {
    const result = await MeetingService.getRemoteUser(uid);
		console.log(result.data)
		return `${result.data.user.firstname} ${result.data.user.lastname}`
  }

  const updateList = async () => {
    const promises: any[] = [];
    participants.forEach((participant) => {
      const result = getFullname(participant.uid);
      promises.push({
        hasAudio: participant.hasAudio, hasVideo: participant.hasVideo, videoTrack: participant.videoTrack,
        uid: participant.uid, audioTrack: participant.audioTrack, fullname: result
      })
      Promise.all(promises).then((responses) => {
        console.log(responses)
        setList(responses)
      })
    })
		
  }

  useEffect(() => {
    updateList();
  
	}, [participants]);

  return (
    <>
      {list?.map((participant) => (
        <div className="user flex-grow-1 flex-shrink-1"
          style={{minWidth: 250, maxWidth: '50%', maxHeight: 200}} key={participant.uid}
        >
          <RemoteUser cover="https://www.agora.io/en/wp-content/uploads/2022/10/3d-spatial-audio-icon.svg" user={participant}>
            <samp className="user-name">{ participant.fullname}</samp>
          </RemoteUser>
        </div>
      ))}
    </>
  )
}


export const Basics = () => {

  const {authState, userData} = useContext(AuthContext);
  const [calling, setCalling] = useState(false);
  const isConnected = useIsConnected(); // Store the user's connection status
  const [appId, setAppId] = useState(agoraProps.appId);
  const [rtcChannel, setRtcChannel] = useState(agoraProps.channelName);
  const [token, setToken] = useState(agoraProps.generatedToken);
  const [channel, setChannel] = useState<RtmChannel>();
  const [participants, setParticipants] = useState<string[]>();
  const [list, setList] = useState<any[]>([]);


  const [micOn, setMic] = useState(true);
  const [cameraOn, setCamera] = useState(true);
  const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
  const { localCameraTrack } = useLocalCameraTrack(cameraOn);

  const remoteUsers = useRemoteUsers();
  const client = useRTCClient();

  useJoin({appid: appId, channel: rtcChannel, token: token ? token : null, uid: userData?.id}, calling);
  usePublish([localMicrophoneTrack, localCameraTrack]);
  useRemoteAudioTracks(remoteUsers, client);
  useRemoteVideoTracks(remoteUsers, client);
  
  

  //const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  const handleUserPublished = async (
    user: { hasAudio: any; hasVideo: any; videoTrack: any; uid: any; audioTrack: any; }, mediaType: 'video' | 'audio'
  ) => {

    const currentUserIndex = list?.findIndex(resp => resp.uid === user.uid);
    if (currentUserIndex! >= 0) {
      // c. Replace RemoteUserObject in UsersList

    } else {
      // c. Create meetinguser and Push in UsersList
      const getRemoteUser = await MeetingService.getRemoteUser(user.uid);
      if (getRemoteUser.success) {
        setList([...list, {type: 'remote',
          name: `${getRemoteUser.data.user.firstname} ${getRemoteUser.data.user.lastname}`,
          uid: user.uid,
          remoteUserObj: user,
          volumeLevel: 0
        }])
       
      } else {
        setList([...list, {type: 'remote',
          name: `Unknown User ${user.uid}`,
          uid: user.uid,
          remoteUserObj: user,
          volumeLevel: 0
        }])
      }
      
    }
    
  }
  client.on("user-published", handleUserPublished);

  const getUserData: any = async (uid: number) => {
    const result = await MeetingService.getRemoteUser(uid);
		console.log(result.data)
		return `${result.data.firstname} ${result.data.lastname}`
  }

  //RtmTokenBuilder.buildToken(appID, cert, userId, rtmRole, privilegeExpiredTs)

  // Creates an RtmClient instance. 
  const rtmClient = AgoraRTM.createInstance(agoraProps.appId);

  const initRtm = async () => {

    // Logs in to the Agora RTM system. with uid and token
    await rtmClient.login({uid: `9254`, token: '007eJxSYNCLSuDa/WVV+Im4W2vLmeJunJdN+lltaOu6+fXzFc95X6QoMKQYWiQaWCSZJlkaW5gkG5tbmiZaJhukGBommxubGSUZFi7enSbAx8DQ8ambkYmBkQGEQXwWMMnPYJiUmZOTmZ+Xm5lXWpJazMJgaWRqAlIEUwbiAwIAAP//q7kmHQ=='})

    // Update user attributes
    const fetchUser = getUserData(userData?.profile.pin);
    rtmClient.addOrUpdateLocalUserAttributes({name: `${fetchUser.firstname} ${fetchUser.lastname}`});

    //create channel
    const createChannel = rtmClient.createChannel(agoraProps.channelName);
    setChannel(createChannel);
    //const members = createChannel.getMembers()
    
    // Join a channel
    await createChannel.join()
    
    // Subscribe to events
    createChannel.on('MemberJoined', handleMemberJoined)
    createChannel.on('MemberLeft', handleMemberLeft)
  }

  const handleMemberJoined = async (MemberId: string) => {

    let members = await channel?.getMembers();
    setParticipants(members);

    //let {name} = await rtmClient.getUserAttributesByKeys(MemberId, ['name'])
  
  }
  
  let handleMemberLeft = async (MemberId: string) => {
    let members = await channel?.getMembers();
    setParticipants(members);
  }
  
	const getToken = async () => {
		let tokenForm = {
			appID: agoraProps.appId,
			appCertificate: agoraProps.appCertificate,
			channelName : agoraProps.channelName,
			uid: userData?.profile.pin,
			role : 1
		}

    try {
      const response = await MeetingService.getToken(tokenForm);
			if (response.success) {
				console.log(response.data)
				setToken(response.data)

			} else {}
      
    } catch (error) {
      console.error(error);
    } finally {
      setCalling(true);
    }

  }

  useEffect(() => {
    setCalling(true);
    //getToken()
    //initRtm();
		
	}, []);


  return (
    <>
      <div className="room fle-purple-gradient d-flex flex-column justify-content-between mt-10 mb-10">
        <div className="mt-4 mb-2 p-4 fle-bg-accent w-75 mx-auto">
          <div className="font-weight-bold fle-text-white text-h6"> Participants : nopart  </div>
          <button className={`join-channel`} onClick={() => initRtm()}>
            <span>Init RTM</span>
          </button>
        </div>
        
        <div className="user-list content-wrapper mt-2 mb-2 p-3 overflowY d-flex">
          <div className="user flex-grow-1 flex-shrink-1" style={{minWidth: 200, maxWidth: '33%', maxHeight: 200}}>
            <LocalUser
              audioTrack={localMicrophoneTrack}
              cameraOn={cameraOn}
              micOn={micOn}
              videoTrack={localCameraTrack}
              cover="https://www.agora.io/en/wp-content/uploads/2022/10/3d-spatial-audio-icon.svg"
            >
              <samp className="user-name"> {userData?.firstname}</samp>
            </LocalUser>
          </div>

          {list?.map((participant) => (
            <div id={`usercont_${participant.uid}`} className="user flex-grow-1 flex-shrink-1"
              style={{minWidth: 200, maxWidth: '33%', maxHeight: 200}} key={participant.uid}
            >
              <RemoteUser cover="https://www.agora.io/en/wp-content/uploads/2022/10/3d-spatial-audio-icon.svg" user={participant}>
                <samp className="user-name">{ participant.name}</samp>
              </RemoteUser>
            </div>
          ))}
        </div>

        <div className="mb-3 bg-dark fle-width-350 mx-auto d-flex p-3 justify-content-around" style={{borderRadius: '25%'}} >
          <div className="left-control">
            <Icon className="mx-3"
              icon={!micOn ? 'MicOff' : 'Mic'}
              color={!micOn ? 'danger' : 'light'} size='3x'
              onClick={() => setMic(a => !a)}
            />

            <Icon className="mx-3"
              icon={!cameraOn ? 'VideocamOff' : 'Videocam'}
              color={!cameraOn ? 'danger' : 'success'} size='3x'
              onClick={() => setCamera(a => !a)}
            />
          </div>
          
          <Icon className="mx-3"
            icon={!calling ? 'Call' : 'CallEnd'}
            color={!calling ? 'success' : 'danger'} size='3x'
            onClick={() => setCalling(a => !a)}
          />
        </div>

      </div>
      
    </>
  );
};

export default Basics;