import type { FC } from "react";

import { Paper, SimpleGrid, Text, VisuallyHidden } from "@mantine/core";
import { useTranslation } from "react-i18next";

import type { Portfolio } from "@/entities/portfolio";

import { formatDecimal } from "@/shared/lib";

import classes from "../../AccountPage.module.css";

const SIGN_PREFIX_LENGTH = 2;

type CurrencyCardsProps = {
	amounts: Portfolio["totalsByCurrency"];
};

const CurrencyCards: FC<CurrencyCardsProps> = (props) => {
	const { t } = useTranslation();
	const { amounts } = props;

	const currencies: Record<string, { name: string; symbol: string }> = {
		EUR: { name: t("portfolio.currencies.EUR"), symbol: "€" },
		RUB: { name: t("portfolio.currencies.RUB"), symbol: "₽" },
		USD: { name: t("portfolio.currencies.USD"), symbol: "$" },
	};

	return (
		<SimpleGrid cols={{ base: 1, md: 3, sm: 2 }} spacing={10}>
			{amounts.map((money) => {
				const amount = formatDecimal(money.value);

				return (
					<Paper
						className={classes.total}
						component="dl"
						key={money.currency}
						m={0}
						withBorder
					>
						<Text className={classes.totalBadge} component="dt">
							<span aria-hidden="true">
								{currencies[money.currency]?.symbol ?? money.currency}
							</span>

							<VisuallyHidden>
								{currencies[money.currency]?.name ?? money.currency}
							</VisuallyHidden>
						</Text>

						<Text className={classes.totalAmount} component="dd" m={0}>
							{amount.startsWith("-")
								? (
										<>
											<span className={classes.totalLeadingDigits}>
												{amount.slice(0, SIGN_PREFIX_LENGTH)}
											</span>

											{amount.slice(SIGN_PREFIX_LENGTH)}
										</>
									)
								: (
										amount
									)}{" "}
							{currencies[money.currency]?.symbol ?? money.currency}
						</Text>
					</Paper>
				);
			})}
		</SimpleGrid>
	);
};

export { CurrencyCards };