import type { FC } from "react";

import { useAccountPageVm } from "./AccountPage.vm";
import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
import { AccountPageError } from "./components/AccountPageError.view";
import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";

const AccountPage: FC = () => {
	const vm = useAccountPageVm();
	if (vm.state === "loading") return <AccountPageLoading />;
	if (vm.state === "error") return <AccountPageError {...vm} />;
	if (vm.state === "empty")
		return (
			<AccountPageEmpty
				account={vm.account}
				accountId={vm.accountId}
				incomeSummary={vm.incomeSummary}
				readRetry={vm.readRetry}
				recentEvents={vm.recentEvents}
				recentOperations={vm.recentOperations}
				source={vm.source}
			/>
		);

	return (
		<AccountPageLoaded
			account={vm.account}
			accountId={vm.accountId}
			concentration={vm.concentration}
			currency={vm.currency}
			incomeSummary={vm.incomeSummary}
			onCurrencyChange={vm.onCurrencyChange}
			onSliceChange={vm.onSliceChange}
			onTabChange={vm.onTabChange}
			partial={vm.partial}
			portfolio={vm.portfolio}
			positionSections={vm.positionSections}
			readRetry={vm.readRetry}
			recentEvents={vm.recentEvents}
			recentOperations={vm.recentOperations}
			slice={vm.slice}
			source={vm.source}
			tab={vm.tab}
			unrealizedReturns={vm.unrealizedReturns}
		/>
	);
};

export { AccountPage };