'use client'

import { useJoin } from 'agora-rtc-react';
import { useEffect, useState } from 'react';
import { MediaControl } from './view';
import { UsersGroupPanel } from './components';

type AgoraProps = {
    roomId: number;
    secret?: string;
    stopCalling: () => void;
};

export const AgoraGroup = ({ roomId, secret, stopCalling }: AgoraProps) => {
    const [calling, setCalling] = useState(false);
    const [micOn, setMic] = useState(false);
    const [cameraOn, setCamera] = useState(false);

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

    useJoin(
        {
            appid: process.env.NEXT_PUBLIC_AGORA_APPID,
            channel: `${roomId}-${secret}`,
            token: null,
        },
        calling,
    );

    const stop = () => {
        stopCalling();
        setCalling(false);
    };

    return (
        <>
            <div className="b-agora__wrap">
                <UsersGroupPanel calling={calling} micOn={micOn} cameraOn={cameraOn}/>
            </div>
            <div className="b-agora__panel_group">
                <MediaControl
                    calling={calling}
                    cameraOn={cameraOn}
                    micOn={micOn}
                    setCalling={stop}
                    setCamera={() => setCamera(a => !a)}
                    setMic={() => setMic(a => !a)}
                />
            </div>
        </>
    );
};