import { MantineProvider } from "@mantine/core";
import { render, screen, within } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { describe, expect, it } from "vitest";

import { resource } from "@/test/resource";

import { brokerageAccountCards } from "../../model/display";
import { BrokerageAccountList } from "./BrokerageAccountList";

describe("BrokerageAccountList", () => {
	it("renders account details and an account link", () => {
		render(
			<MantineProvider>
				<MemoryRouter>
					<BrokerageAccountList
						accounts={brokerageAccountCards([
							{
								id: "account-1",
								name: "Основной",
								openedOn: "2024-08-13",
								portfolioSummary: {
									bondPositionCount: 12,
									stockPositionCount: 5,
									totalsByCurrency: [
										{ currency: "RUB", value: "1500" },
										{ currency: "USD", value: "20" },
										{ currency: "EUR", value: "5" },
									],
								},
								type: "BROKERAGE",

							},
							{
								id: "account-2",
								name: "Недоступный",
								openedOn: null,
								portfolioSummary: null,
								type: "BROKERAGE",
							},
							{
								id: "account-3",
								name: "Пустой",
								openedOn: null,
								portfolioSummary: {
									bondPositionCount: 0,
									stockPositionCount: 2,
									totalsByCurrency: [],
								},
								type: "BROKERAGE",
							},
						])}
					/>
				</MemoryRouter>
			</MantineProvider>,
		);

		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
			"href",
			"/accounts/account-1",
		);
		expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
		expect(screen.getByText(/^Открыт /)).toBeInTheDocument();
		expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
		expect(screen.getByText("20 USD")).toBeInTheDocument();
		expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
		expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
		expect(screen.getAllByText("Открыть счет")).toHaveLength(3);
		const available = within(screen.getByRole("link", { name: /Основной/ }));
		expect(available.getAllByRole("definition")[0]).toHaveTextContent("5");
		expect(available.getAllByRole("definition")[1]).toHaveTextContent("12");
		const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
		expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent("2");
		expect(unvalued.getAllByRole("definition")[1]).toHaveTextContent("0");
		expect(
			within(screen.getByRole("link", { name: /Недоступный/ })).queryByText(
				"Акции",
			),
		).not.toBeInTheDocument();
	});
});

it("shows portfolio summary freshness independently for each account", () => {
	const accounts = brokerageAccountCards(
		["fresh", "stale"].map(

			id =>
				({
					id,
					name: id,
					openedOn: null,
					portfolioSummary: {
						bondPositionCount: 0,
						stockPositionCount: 1,
						totalsByCurrency: [{ currency: "RUB", value: "10" }],
					},
					type: "BROKERAGE" as const,
				}),
		),
		[
			resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" })
				.meta,
			resource(null, { freshness: "stale", resourceKey: "portfolio/stale" })
				.meta,
		],
	);

	render(
		<MantineProvider>
			<MemoryRouter>
				<BrokerageAccountList accounts={accounts} />
			</MemoryRouter>
		</MantineProvider>,
	);
	expect(
		within(screen.getByRole("link", { name: /stale/ })).getByText(
			"Данные требуют обновления",
		),
	).toBeVisible();
	expect(
		within(screen.getByRole("link", { name: /fresh/ })).queryByText(
			"Данные требуют обновления",
		),
	).not.toBeInTheDocument();
});