import type { FC } from "react";

import { Stack } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import type { BrokerageAccount } from "@/entities/brokerage-account";

import { BrokerageEventsPreview } from "@/entities/brokerage-event";

import type {
	AccountPageIncomeSummary,
	AccountPageRecentEvents,
	AccountPageRecentOperations,
} from "../AccountPage.vm";

import { AccountHeading } from "./AccountHeading.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { RecentOperations } from "./RecentOperations.view";

type AccountPageEmptyProps = {
	account?: BrokerageAccount;
	accountId?: string;
	incomeSummary?: AccountPageIncomeSummary;
	recentEvents: AccountPageRecentEvents;
	recentOperations: AccountPageRecentOperations;
	refreshError?: boolean;
	refreshing?: boolean;
	retry?: () => void;
	sourceError?: boolean;
};

const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
	const { t } = useTranslation();
	return (
		<Stack>
			<AccountHeading account={props.account} accountId={props.accountId} />
			<PortfolioRefreshState
				refreshError={props.refreshError ?? false}
				refreshing={props.refreshing ?? false}
				retry={props.retry}
				sourceError={props.sourceError}
			/>
			<StateView
				text={t(
					props.accountId === "all"
						? "portfolio.allEmptyText"
						: "portfolio.emptyText",
				)}
				title={t("portfolio.emptyTitle")}
			/>
			<PortfolioStructure
				structure={{ currencies: [], unvaluedCategories: [] }}
			/>
			<RecentOperations operations={props.recentOperations} />
			<BrokerageEventsPreview events={props.recentEvents} />
			{!!(props.incomeSummary) && (<IncomeSummary {...props.incomeSummary} />)}
		</Stack>
	);
};

export { AccountPageEmpty };