import React from 'react';
import { useDyteMeeting, useDyteSelector } from '../../src';

function Meeting() {
	const { meeting } = useDyteMeeting();
	const roomJoined = useDyteSelector((m) => m.self.roomJoined);
	const participantCount = useDyteSelector(
		(m) => m.participants.count,
	);
	const self = useDyteSelector((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.joinRoom()}>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;