import {
	Alert,
	Button,
	Group,
	Loader,
	Stack,
	Text,
	Title,
} from "@mantine/core";
import type { FC } from "react";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { StateView } from "@/shared/ui";
import classes from "../AccountIncomePage.module.css";
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
import { IncomeComparisons } from "./IncomeComparisons.view";
import { IncomePayments } from "./IncomePayments.view";
import { IncomePeriodForm } from "./IncomePeriodForm.view";
import { IncomeSummary } from "./IncomeSummary.view";

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

const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
	const {
		analytics,
		display,
		form,
		refreshing,
		refreshError,
		retry,
		onSubmit,
		onReset,
	} = props;
	const { t } = useTranslation();
	return (
		<Stack maw={960} gap="lg" className={classes.page}>
			<Title order={1}>{t("income.title")}</Title>
			<FormProvider {...form}>
				<IncomePeriodForm
					key={props.formRevision}
					onSubmit={form.handleSubmit(onSubmit)}
					onReset={onReset}
				/>
			</FormProvider>
			{refreshing ? (
				<Group gap="xs" role="status" aria-label={t("income.refreshing")}>
					<Loader size="sm" />
					<Text>{t("income.refreshing")}</Text>
				</Group>
			) : null}
			{refreshError ? (
				<Alert color="orange">
					<Stack gap="sm">
						<Text>{t("income.refreshError")}</Text>
						<Button onClick={retry} variant="default">
							{t("income.retry")}
						</Button>
					</Stack>
				</Alert>
			) : null}
			{analytics.totalsByCurrency.length ? (
				<IncomeSummary totals={analytics.totalsByCurrency} />
			) : (
				<StateView
					title={t("income.emptyTitle")}
					text={t("income.emptyText")}
				/>
			)}
			<Alert color="blue">{t("income.taxBoundary")}</Alert>
			<IncomeComparisons comparison={display.comparison} />
			<IncomePayments entries={display.entries} />
		</Stack>
	);
};

export { AccountIncomePageLoaded };