import { useState } from "react";
import { useParams } from "react-router";
import {
	type BrokerageOperation,
	type OperationCategory,
	useBrokerageOperations,
} from "@/entities/broker-operation";

type AccountOperationsPageViewModel =
	| { state: "loading" }
	| { state: "error"; retry: () => void }
	| {
			state: "loaded";
			from: string;
			to: string;
			categories: OperationCategory[];
			items: BrokerageOperation[];
			hasNext: boolean;
			hasPrevious: boolean;
			onFromChange: (value: string) => void;
			onToChange: (value: string) => void;
			onCategoriesChange: (value: OperationCategory[]) => void;
			onNext: () => void;
			onPrevious: () => void;
	  };

const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
	const { accountId } = useParams();
	const [from, setFrom] = useState("");
	const [to, setTo] = useState("");
	const [categories, setCategories] = useState<OperationCategory[]>([]);
	const [cursors, setCursors] = useState<string[]>([]);
	const cursor = cursors.at(-1);
	const operations = useBrokerageOperations(accountId, {
		from: dateStart(from),
		to: dateEnd(to),
		...(categories.length ? { categories } : {}),
		...(cursor ? { cursor } : {}),
		limit: 100,
	});
	const reset = () => setCursors([]);

	if (operations.isLoading) return { state: "loading" };
	if (operations.isError)
		return { state: "error", retry: () => operations.refetch() };
	if (!operations.data) return { state: "loading" };
	const nextCursor = operations.data.nextCursor;

	return {
		state: "loaded",
		from,
		to,
		categories,
		items: operations.data.items,
		hasNext: Boolean(operations.data.hasNext && nextCursor),
		hasPrevious: Boolean(cursors.length),
		onFromChange: (value) => {
			setFrom(value);
			reset();
		},
		onToChange: (value) => {
			setTo(value);
			reset();
		},
		onCategoriesChange: (value) => {
			setCategories(value);
			reset();
		},
		onNext: () => {
			if (nextCursor) setCursors((value) => [...value, nextCursor]);
		},
		onPrevious: () => setCursors((value) => value.slice(0, -1)),
	};
};

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

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

export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };