import { useLocalMicrophoneTrack, useLocalCameraTrack, usePublish, useIsConnected } from 'agora-rtc-react';
import { UserOutlined } from '@ant-design/icons';
import { useLocalStorage } from '../../../../hooks/useLocalStorage';
import { AUTH_USER } from '../../../../constants/common';
import { LocalUser } from './LocalUser';

type LocalUserPanelProps = {
    calling: boolean;
    micOn: boolean;
    cameraOn: boolean;
};

export const LocalUserPanel = ({
    calling,
    micOn,
    cameraOn
}: LocalUserPanelProps) => {
    const isConnected = useIsConnected();
    const [userData] = useLocalStorage(AUTH_USER, '');
    const { faceImageUrl: userImage = '' } = userData ? JSON.parse(userData) : {};
    const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
    const { localCameraTrack } = useLocalCameraTrack(cameraOn);

    usePublish([localMicrophoneTrack, localCameraTrack]);

    return calling && isConnected ? (
        <div className="b-agora__local_user">
            {!cameraOn && (
                <div className="b-agora__local_base">
                    <div className="b-agora__call_avatar" style={userImage ? { backgroundImage: `url(${userImage})` } : undefined}>
                        {!userImage && (<UserOutlined style={{ fontSize: 40, color: '#2C7873' }}/>)}
                    </div>
                </div>
            )}
            <LocalUser
                audioTrack={localMicrophoneTrack}
                cameraOn={cameraOn}
                micOn={micOn}
                videoTrack={localCameraTrack}
            />
        </div>
    ) : null;
};
