import { HTMLProps, ReactNode } from 'react';
import { ICameraVideoTrack, IMicrophoneAudioTrack, MaybePromiseOrNull } from 'agora-rtc-react';
import { UserCover } from '../components';
import { MicrophoneAudioTrack } from './MicrophoneAudioTrack';
import { CameraVideoTrack } from './CameraVideoTrack';

interface LocalUserProps extends HTMLProps<HTMLDivElement> {
    /**
     * Whether to turn on the local user's microphone. Default false.
     */
    readonly micOn?: boolean;
    /**
     * Whether to turn on the local user's camera. Default false.
     */
    readonly cameraOn?: boolean;
    /**
     * A microphone audio track which can be created by `createMicrophoneAudioTrack()`.
     */
    readonly audioTrack?: MaybePromiseOrNull<IMicrophoneAudioTrack>;
    /**
     * A camera video track which can be created by `createCameraVideoTrack()`.
     */
    readonly videoTrack?: MaybePromiseOrNull<ICameraVideoTrack>;
    /**
     * Whether to play the local user's audio track. Default follows `micOn`.
     */
    readonly playAudio?: boolean;
    /**
     * Whether to play the local user's video track. Default follows `cameraOn`.
     */
    readonly playVideo?: boolean;
    /**
     * Device ID, which can be retrieved by calling `getDevices()`.
     */
    readonly micDeviceId?: string;
    /**
     * Device ID, which can be retrieved by calling `getDevices()`.
     */
    readonly cameraDeviceId?: string;
    /**
     * The volume. The value ranges from 0 (mute) to 1000 (maximum). A value of 100 is the current volume.
     */
    readonly volume?: number;
    /**
     * Render cover image if playVideo is off.
     */
    readonly cover?: string;
    /**
     * Children is rendered on top of the video canvas.
     */
    readonly children?: ReactNode;
}

/**
 * Play/Stop local user camera and microphone track.
 */
export function LocalUser({
    micOn,
    cameraOn,
    audioTrack,
    videoTrack,
    playAudio = false,
    playVideo,
    micDeviceId,
    cameraDeviceId,
    volume,
    cover,
    children,
    style,
    ...props
}: LocalUserProps) {
    playVideo = playVideo ?? !!cameraOn;
    playAudio = playAudio ?? !!micOn;
    return (
        <div {...props} style={{
            position: "relative",
            width: "100%",
            height: "100%",
            overflow: "hidden",
            background: "#000",
            ...style
        }}>
            <CameraVideoTrack
                deviceId={cameraDeviceId}
                disabled={!cameraOn}
                play={playVideo}
                track={videoTrack}
            />
            <MicrophoneAudioTrack
                deviceId={micDeviceId}
                disabled={!micOn}
                play={playAudio}
                track={audioTrack}
                volume={volume}
            />
            {cover && !cameraOn && <UserCover cover={cover} />}
            <div style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                overflow: "hidden",
                zIndex: 2,
            }}>{children}</div>
        </div>
    );
};
