import React from 'react';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '../../src';

function Meeting() {
    const { meeting } = useRealtimeKitMeeting();
    const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);
    const participantCount = useRealtimeKitSelector((m) => m.participants.count);
    const self = useRealtimeKitSelector((m) => m.self);

    return (
        <fieldset>
            <legend>Meeting details</legend>
            <div>
                {!roomJoined && (
                    <div>
                        <div>
                            Status:
                            {' '}
                            {roomJoined === undefined ? 'Connecting...' : 'Connected'}
                        </div>
                        {meeting && (
                            <div>
                                <button type="button" onClick={() => meeting.join()}>
                                  Join
                                </button>
                            </div>
                        )}
                    </div>
                )}
                {roomJoined && (
                    <div>
                        <div>
                            Name:
                            {self?.name}
                        </div>
                        <div>
                            audio:
                            {' '}
                            <span className="token">
                                {JSON.stringify(self?.audioEnabled)}
                            </span>
                            , video:
                            {' '}
                            <span className="token">
                                {JSON.stringify(self?.videoEnabled)}
                            </span>
                        </div>
                        <div>
                            Participant Count:
                            {participantCount}
                        </div>
                        <button
                            type="button"
                            onClick={() => {
                                if (self?.audioEnabled) {
                                    self?.disableAudio();
                                } else {
                                    self?.enableAudio();
                                }
                            }}
                        >
                            {self?.audioEnabled ? 'Disable Audio' : 'Enable Audio'}
                        </button>
                        <button
                            type="button"
                            onClick={() => {
                                if (self?.videoEnabled) {
                                    self?.disableVideo();
                                } else {
                                    self?.enableVideo();
                                }
                            }}
                        >
                            {self?.videoEnabled ? 'Disable Video' : 'Enable Video'}
                        </button>
                    </div>
                )}
            </div>
        </fieldset>
    );
}

export default Meeting;