import { UserOutlined } from '@ant-design/icons';
import {
    useIsConnected,
    useRemoteAudioTracks,
    useRemoteUsers,
    useRemoteVideoTracks
} from 'agora-rtc-react';
import { RenderRemoteUsers } from './RemoteUsers';
import { PublicUser } from '../../../../types/sessions';

export const RemoteUserPanel = ({ calling, user }: { calling: boolean, user?: PublicUser }) => {
    const isConnected = useIsConnected();
    const remoteUsers = useRemoteUsers();
    const { videoTracks } = useRemoteVideoTracks(remoteUsers);
    const { audioTracks } = useRemoteAudioTracks(remoteUsers);
    audioTracks.map(track => track.play());

    return calling && isConnected ? (
        <div className="b-agora__remote_user">
            {videoTracks?.length > 0 ? (
                <RenderRemoteUsers videoTracks={videoTracks} />
            ) : (
                <div className="b-agora__remote_base">
                    {remoteUsers?.length === 0 && (
                        <div className="b-agora__remote_warning">
                            Ожидайте подключения собеседника
                        </div>
                    )}
                    <div className="b-agora__call_avatar" style={user?.faceImageUrl ? { backgroundImage: `url(${user.faceImageUrl})` } : undefined}>
                        {!user?.faceImageUrl && (<UserOutlined style={{ fontSize: 40, color: '#2C7873' }}/>)}
                    </div>
                </div>
            )}
        </div>
    ) : null;
}
