import type { FC } from "react";

import { useAccountPageViewModel } 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";

type AccountPageProps = { accountId?: string };

const AccountPage: FC<AccountPageProps> = (props) => {
	const viewModel = useAccountPageViewModel(props.accountId);
	if (viewModel.state === "loading") return <AccountPageLoading />;
	if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
	if (viewModel.state === "empty")
		return (
			<AccountPageEmpty
				account={viewModel.account}
				accountId={viewModel.accountId}
				incomeSummary={viewModel.incomeSummary}
				recentEvents={viewModel.recentEvents}
				recentOperations={viewModel.recentOperations}
				refreshError={viewModel.refreshError}
				refreshing={viewModel.refreshing}
				retry={viewModel.retry}
				sourceError={viewModel.sourceError}
			/>
		);

	return (
		<AccountPageLoaded
			account={viewModel.account}
			accountId={viewModel.accountId}
			incomeSummary={viewModel.incomeSummary}
			partial={viewModel.partial}
			portfolio={viewModel.portfolio}
			positionSections={viewModel.positionSections}
			recentEvents={viewModel.recentEvents}
			recentOperations={viewModel.recentOperations}
			refreshError={viewModel.refreshError}
			refreshing={viewModel.refreshing}
			retry={viewModel.retry}
			sourceError={viewModel.sourceError}
		/>
	);
};

export { AccountPage };