frontend/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts

import { useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useParams, useSearchParams } from "react-router";
import {
	type BrokerageOperation,
	brokerageOperationsQueryOptions,
	type OperationCategory,
	operationCategories,
	useBrokerageOperations,
} from "@/entities/broker-operation";

import { apiErrorCode } from "@/shared/api";

type AccountOperationsPageViewModel =
	| { state: "loading" }
	| { state: "error"; retry: () => void }
	| {
			state: "loaded";
			refreshing?: boolean;
			refreshError?: boolean;
			retry?: () => void;
			draftFrom: string | null;
			draftTo: string | null;
			draftCategories: OperationCategory[];
			items: BrokerageOperation[];
			hasNext: boolean;
			hasPrevious: boolean;
			canApply: boolean;
			onDraftFromChange: (value: string | null) => void;
			onDraftToChange: (value: string | null) => void;
			onDraftCategoriesChange: (value: OperationCategory[]) => void;
			onApply: () => void;
			onReset: () => void;
			onNext: () => void;
			onPrevious: () => void;
	  };

const useAccountOperationsPageVm = (
	scopeId?: string,
): AccountOperationsPageViewModel => {
	const { accountId: routeAccountId } = useParams();
	const accountId = scopeId ?? routeAccountId;
	const queryClient = useQueryClient();
	const [searchParams, setSearchParams] = useSearchParams();
	const appliedFrom = searchParams.get("from");
	const appliedTo = searchParams.get("to");
	const appliedCategories = operationCategories.filter((category) =>
		(searchParams.get("categories") ?? "").split(",").includes(category),
	);
	const [draftFrom, setDraftFrom] = useState<string | null>(appliedFrom);
	const [draftTo, setDraftTo] = useState<string | null>(appliedTo);
	const [draftCategories, setDraftCategories] =
		useState<OperationCategory[]>(appliedCategories);
	const scopeKey = JSON.stringify([
		accountId,
		appliedFrom,
		appliedTo,
		appliedCategories,
	]);
	const [pagination, setPagination] = useState<{
		scopeKey: string;
		cursors: string[];
	}>({ scopeKey, cursors: [] });
	const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : [];
	const cursor = cursors.at(-1);
	useEffect(() => {
		setDraftFrom(searchParams.get("from"));
		setDraftTo(searchParams.get("to"));
		setDraftCategories(
			operationCategories.filter((category) =>
				(searchParams.get("categories") ?? "").split(",").includes(category),
			),
		);
	}, [searchParams]);
	const firstPageQuery = {
		from: dateStart(appliedFrom),
		to: dateEnd(appliedTo),
		...(appliedCategories.length ? { categories: appliedCategories } : {}),
		limit: 100,
	};
	const operations = useBrokerageOperations(accountId, {
		...firstPageQuery,
		...(cursor ? { cursor } : {}),
	});
	const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
		limit: 100,
	}).queryKey;

	const resetCursors = () => setPagination({ scopeKey, cursors: [] });
	const retry = () => {
		if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") {
			void queryClient.invalidateQueries({
				queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
					.queryKey,
				exact: true,
			});
			resetCursors();
		} else void operations.refetch();
	};

	if (operations.isLoading) return { state: "loading" };
	if (
		operations.isError &&
		(!operations.data ||
			apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR")
	)
		return { state: "error", retry };
	if (!operations.data) return { state: "loading" };
	const nextCursor = operations.data.nextCursor;

	const isDirty =
		draftFrom !== appliedFrom ||
		draftTo !== appliedTo ||
		!sameCategories(draftCategories, appliedCategories);

	return {
		state: "loaded",
		refreshing: operations.isFetching,
		refreshError: operations.isError,
		retry,
		draftFrom,
		draftTo,
		draftCategories,
		items: operations.data.items,
		hasNext: Boolean(operations.data.hasNext && nextCursor),
		hasPrevious: Boolean(cursors.length),
		canApply: isDirty,
		onDraftFromChange: setDraftFrom,
		onDraftToChange: setDraftTo,
		onDraftCategoriesChange: setDraftCategories,
		onApply: () => {
			setSearchParams({
				...(draftFrom ? { from: draftFrom } : {}),
				...(draftTo ? { to: draftTo } : {}),
				...(draftCategories.length
					? { categories: draftCategories.join(",") }
					: {}),
			});
			resetCursors();
		},
		onReset: () => {
			setDraftFrom(null);
			setDraftTo(null);
			setDraftCategories([]);
			setSearchParams({});
			resetCursors();
			void queryClient.invalidateQueries({ queryKey: resetQueryKey });
		},
		onNext: () => {
			if (nextCursor)
				setPagination({ scopeKey, cursors: [...cursors, nextCursor] });
		},
		onPrevious: () =>
			setPagination({ scopeKey, cursors: cursors.slice(0, -1) }),
	};
};

function dateStart(value: string | null) {
	return value ? `${value}T00:00:00.000Z` : undefined;
}

function dateEnd(value: string | null) {
	return value ? `${value}T23:59:59.999Z` : undefined;
}

function sameCategories(a: OperationCategory[], b: OperationCategory[]) {
	return a.length === b.length && a.every((value) => b.includes(value));
}

export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };