import React, { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = process.env.REACT_APP_SERVER;

function App() {
	const [global, setGlobal] = useState(false);

	useEffect(() => {
		const get = async() => {
			try {
				const res = await axios.get('/api/global');
				setGlobal(res.data);
			} catch (error) {
				setGlobal(false);
			}
		};

		const interval = setInterval(get, 500);
		return () => clearInterval(interval);
	}, []);

	return (
		<div className="app">
			{global &&
				<>
					<p>Name: {global.name}</p>
					<p>Pos: {global.pos}</p>
					<p>Yaw: {global.yaw}</p>
					<p>Pitch: {global.pitch}</p>

					<p>Dimention: {global.dimension}</p>

					<p>Players:
						{Object.values(global.players).map(x =>
							<div>
								{global.player_names[x.player_uuid]}
							</div>
						)}
					</p>

					<p>Holding: {global.holding}</p>
					<p>AFK: {`${global.afk}`}</p>
					<p>Health: {global.health}</p>
					<p>Food: {global.food}</p>
					<p>Time: {global.time}</p>
				</>
			}
		</div>
	);
}

export default App;