frontend/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx

import type { FC } from "react";

import {
	Alert,
	Stack,
	Title,
} from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";

import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";

import classes from "../AccountIncomePage.module.css";
import { IncomePayments } from "./IncomePayments.view";
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
import { IncomeSummary } from "./IncomeSummary.view";

type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;

const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
	const { t } = useTranslation();

	const { analytics } = props;

	if (props.partial) {
		return <Alert role="status">{t("investment.partial")}</Alert>;
	}

	return analytics.totalsByCurrency.length > 0
		? <IncomeSummary totals={analytics.totalsByCurrency} />
		: <StateView text={t("income.emptyText")} title={t("income.emptyTitle")} />;
};

const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
	const { display, form, onReset, onSubmit } = props;

	const { t } = useTranslation();

	return (
		<Stack className={classes.page} gap="lg">
			<Title order={1}>{t("income.title")}</Title>

			<FormProvider {...form}>
				<IncomePeriodForm
					key={props.formRevision}
					onReset={onReset}
					onSubmit={form.handleSubmit(onSubmit)}
				/>
			</FormProvider>

			<AccountIncomePageLoadedSummary {...props} />

			<Alert color="blue">{t("income.taxBoundary")}</Alert>

			<IncomePayments entries={display.entries} />
		</Stack>
	);
};

export { AccountIncomePageLoaded };