import type { ChangeEvent } from "react";

import { useState } from "react";
import { useSearchParams } from "react-router";

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

type CardsPageVm = ReturnType<typeof useCardsPageVm>;

function useCardsPageVm() {
	const [parameters, setParameters] = useSearchParams();
	const period = bankPeriod(parameters);
	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 {
		adding,
		archive,
		cards,
		categories,
		closeAdding: () => setAdding(false),
		closeCategories: () => setManagingCategories(false),
		items: cards.data?.map(card => ({
			...card,
			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
		})),
		managingCategories,
		onAddCard: () => setAdding(true),
		onArchiveChange: (event: ChangeEvent<HTMLInputElement>) =>
			setArchive(event.currentTarget.checked),
		onCategories: () => setManagingCategories(true),
		period,
		setPeriod: (value: [null | string, null | string]) => {
			if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
		},
		summary,
	};
}

export { type CardsPageVm, useCardsPageVm };