import { useState } from "react";
import { useSearchParams } from "react-router";
import {
	bankPeriod,
	useBankCards,
	useBankCategories,
	useBankSummary,
} from "@/entities/bank-card";

function useCardsPageVm() {
	const [params, setParams] = useSearchParams();
	const period = bankPeriod(params);
	const [archive, setArchive] = useState(false);
	const categories = useBankCategories();
	const [managingCategories, setManagingCategories] = useState(false);
	const [adding, setAdding] = useState(false);
	const cards = useBankCards(archive);
	const summary = useBankSummary(period);
	return {
		categories,
		managingCategories,
		setManagingCategories,
		period,
		archive,
		setArchive,
		adding,
		setAdding,
		cards,
		summary,
		setPeriod: (value: [string | null, string | null]) => {
			if (value[0] && value[1]) setParams({ from: value[0], to: value[1] });
		},
		items: cards.data?.map((card) => ({
			...card,
			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
		})),
	};
}
type CardsPageVm = ReturnType<typeof useCardsPageVm>;

export { type CardsPageVm, useCardsPageVm };