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 { PortfolioStructure } from "@/widgets/portfolio-structure";

import type {
	AccountPageIncomeSummary,
	AccountPageRecentEvents,
	AccountPageRecentOperations,
} from "../../../model/previews";

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

type AccountPageEmptyProps = {
	account?: BrokerageAccount;
	accountId?: string;
	incomeSummary?: AccountPageIncomeSummary;
	recentEvents: AccountPageRecentEvents;
	recentOperations: AccountPageRecentOperations;
};

const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
	const { t } = useTranslation();

	const text = t(
		props.accountId === "all"
			? "portfolio.allEmptyText"
			: "portfolio.emptyText",
	);

	return (
		<Stack>
			<AccountHeading account={props.account} accountId={props.accountId} />

			<StateView text={text} title={t("portfolio.emptyTitle")} />

			<PortfolioStructure
				structure={{ currencies: [], unvaluedCategories: [] }}
			/>

			<RecentOperations operations={props.recentOperations} />

			<BrokerageEventsPreview events={props.recentEvents} />

			{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
		</Stack>
	);
};

export { AccountPageEmpty };