import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { graph_data_two_measures } from "../../test/mock/charts/mock-data";
import SignOutButton from "../component/buttons/sign-out";
import BarGraph from "../component/charts/bar-graph/bar-graph";
import { useAuth } from "../context";
import { useAuthHeader } from "../graphql/client";

// Session Mock - can be used for session summary screen using a query handler component
// BarGraph component using mocked data currently
export default function SessionScreen() {
	const { user } = useAuth();
	const { authHeader } = useAuthHeader();

	return (
		<View style={StyleSheet.absoluteFill}>
			<BarGraph data={graph_data_two_measures} />

			{user && (
				<>
					<Text style={{ marginTop: 10 }}>
						Display name: {user?.displayName}
					</Text>
					<Text>Phone number: {user?.phoneNumber}</Text>
				</>
			)}
			<SignOutButton />
			<Text>
				{authHeader.key}: {authHeader.value}
			</Text>
		</View>
	);
}