import type { FC } from "react";

import {
	Alert,
	Button,
	Group,
	MultiSelect,
	Stack,
	Title,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
import { SourceSyncStatus } from "@/shared/ui";

import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";

type AccountOperationsPageLoadedProps = Extract<
	AccountOperationsPageViewModel,
	{ state: "loaded" }
>;

const AccountOperationsPageLoadedOperations: FC<
	AccountOperationsPageLoadedProps
> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
	const { t } = useTranslation();

	const { items } = props;

	if (items.length > 0) {
		return items.map(operation => (
			<LedgerEntryRow
				key={JSON.stringify([
					operation.account?.id,
					operation.id,
					operation.logoName,
				])}
				operation={operation}
			/>
		));
	}

	if (props.partial) {
		return;
	}

	return <StateView text={t("ledger.emptyText")} title={t("ledger.emptyTitle")} />;
};

const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
	props,
) => {
	const { t } = useTranslation();

	const categoryData = operationCategories.map(category => ({
		label: t(`ledger.category.${category}`),
		value: category,
	}));

	return (
		<Stack gap="lg">
			<Title order={1}>{t("ledger.title")}</Title>

			<SourceSyncStatus
				lastAttempt={props.source?.lastAttempt}
				lastSuccessfulAt={props.source?.lastSuccessfulAt}
				stale={props.source?.freshness === "stale"}
			/>

			{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}

			{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}

			<Group align="end">
				<DatePickerInput
					allowSingleDateInRange
					clearable
					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
					label={t("ledger.period")}
					maxDate={props.maxDate}
					onChange={props.onPeriodChange}
					popoverProps={{
						middlewares: { shift: { crossAxis: true } },
						onOpen: props.onPeriodPopoverOpen,
						returnFocus: true,
					}}
					type="range"
					value={props.draftPeriod}
					valueFormat="DD.MM.YYYY"
				/>
			</Group>

			<MultiSelect
				clearable
				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
				data={categoryData}
				label={t("ledger.categories")}
				onChange={props.onCategoriesChange}
				placeholder={t("ledger.categoriesPlaceholder")}
				value={props.draftCategories}
			/>

			<Group>
				<Button disabled={!props.canApply} onClick={props.onApply}>
					{t("ledger.apply")}
				</Button>

				<Button onClick={props.onReset} variant="default">
					{t("ledger.reset")}
				</Button>
			</Group>

			<AccountOperationsPageLoadedOperations {...props} />

			{!!(props.hasNext || props.hasPrevious) && (
				<Group justify="space-between">
					<Button disabled={!props.hasPrevious} onClick={props.onPrevious}>
						{t("ledger.previous")}
					</Button>

					<Button disabled={!props.hasNext} onClick={props.onNext}>
						{t("ledger.next")}
					</Button>
				</Group>
			)}
		</Stack>
	);
};

export { AccountOperationsPageLoaded };