import {
	Alert,
	Button,
	Group,
	MultiSelect,
	Progress,
	Stack,
	Title,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import {
	LedgerEntryRow,
	type OperationCategory,
	operationCategories,
} from "@/entities/broker-operation";
import { StateView } from "@/shared/ui";
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";

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

const operationCategorySet = new Set<string>(operationCategories);

function fromMultiSelectValue(value: string[]) {
	return value.filter((item): item is OperationCategory =>
		operationCategorySet.has(item),
	);
}

const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
	props,
) => {
	const {
		canApply,
		draftCategories,
		draftFrom,
		draftTo,
		hasNext,
		hasPrevious,
		items,
		onApply,
		onDraftCategoriesChange,
		onDraftFromChange,
		onDraftToChange,
		onNext,
		onPrevious,
		onReset,
	} = props;
	const { t } = useTranslation();

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

	return (
		<Stack gap="lg">
			<Title order={1}>{t("ledger.title")}</Title>
			{props.refreshing ? (
				<Progress value={100} animated aria-label={t("accounts.refreshing")} />
			) : null}
			{props.refreshError ? (
				<Alert color="yellow">
					{t("accounts.refreshError")}
					<Button variant="subtle" onClick={props.retry}>
						{t("accounts.retry")}
					</Button>
				</Alert>
			) : null}
			<Group align="end">
				<DatePickerInput
					type="range"
					allowSingleDateInRange
					clearable
					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
					label={t("ledger.period")}
					value={[draftFrom, draftTo]}
					onChange={([from, to]) => {
						onDraftFromChange(from);
						onDraftToChange(to);
					}}
					valueFormat="DD.MM.YYYY"
					popoverProps={{
						returnFocus: true,
						middlewares: { shift: { crossAxis: true } },
					}}
				/>
			</Group>
			<MultiSelect
				label={t("ledger.categories")}
				placeholder={t("ledger.categoriesPlaceholder")}
				data={categoryData}
				value={draftCategories}
				onChange={(value) =>
					onDraftCategoriesChange(fromMultiSelectValue(value))
				}
				clearable
				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
			/>
			<Group>
				<Button onClick={onApply} disabled={!canApply}>
					{t("ledger.apply")}
				</Button>
				<Button variant="default" onClick={onReset}>
					{t("ledger.reset")}
				</Button>
			</Group>
			{items.length ? (
				items.map((operation) => (
					<LedgerEntryRow
						key={JSON.stringify([
							operation.account?.id,
							operation.id,
							operation.logoName,
						])}
						operation={operation}
					/>
				))
			) : (
				<StateView
					title={t("ledger.emptyTitle")}
					text={t("ledger.emptyText")}
				/>
			)}
			{hasNext || hasPrevious ? (
				<Group justify="space-between">
					<Button disabled={!hasPrevious} onClick={onPrevious}>
						{t("ledger.previous")}
					</Button>
					<Button disabled={!hasNext} onClick={onNext}>
						{t("ledger.next")}
					</Button>
				</Group>
			) : null}
		</Stack>
	);
};

export { AccountOperationsPageLoaded };