import { createFileRoute } from "@tanstack/react-router";
import { PartyView } from "#/components/party/party-view";
import { PartyQr } from "#/components/party-qr";
import { StartParty } from "#/components/start-party";
import { SyncButton } from "#/components/sync-button";
import { MainContent } from "#/components/ui/main-content";
import { UserInfo } from "#/components/user-info";
import { useParty } from "#/hooks/use-party";
import { useUser } from "#/hooks/user";

export const Route = createFileRoute("/")({ component: App });

function App() {
	const { user } = useUser();
	const { party, members } = useParty();
	return (
		<MainContent>
			<UserInfo />
			{!user?.lastSyncAt && <SyncButton />}
			{user && <PartyQr />}
			{party && !party.data && members.length > 1 && <StartParty />}
			{party?.data && <PartyView />}
		</MainContent>
	);
}