import type { FC } from "react";

import { ContactlessIcon } from "@wealthledger/icons";
import { useTranslation } from "react-i18next";

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

import type { BankCard } from "../../api/types";

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

type BankCardFaceProps = { card: BankCard };

const BankCardFace: FC<BankCardFaceProps> = (props) => {
	const { card } = props;
	const { t } = useTranslation();
	const bank = card.bankName?.toLocaleLowerCase("ru") ?? "";
	const tone = bankTone(bank);

	return (
		<div className={classes.face} data-tone={tone}>
			<div className={classes.top}>
				<span className={classes.bank}>{card.bankName || t("bank.card")}</span>

				{card.archivedAt && <span className={classes.archive}>{t("bank.archived")}</span>}
			</div>

			<div aria-hidden="true" className={classes.hardware}>
				<span className={classes.chip} />

				<ContactlessIcon height="30" viewBox="0 0 24 30" />
			</div>

			<div className={classes.number}>
				{`•••• •••• •••• ${card.lastFour || "••••"}`}
			</div>

			<div className={classes.bottom}>
				<div className={classes.details}>
					<div className={classes.name}>{card.name}</div>

					<div className={classes.balance}>{formatMoney(card.balance)}</div>
				</div>

				{card.paymentSystem && (
					<span className={classes.network} data-network={card.paymentSystem}>
						{card.paymentSystem === "mastercard" && <span aria-hidden="true" className={classes.circles} />}

						{t(`bank.paymentSystems.${card.paymentSystem}`)}
					</span>
				)}
			</div>
		</div>
	);
};

function bankTone(bank: string) {
	if (/сбер|sber/.test(bank)) return "green";
	if (/тинькофф|т[ -]?банк|t[ -]?bank|tinkoff/.test(bank)) return "yellow";
	if (/альфа|alfa/.test(bank)) return "red";

	return /втб|vtb|газпром|gazprom/.test(bank) ? "blue" : "graphite";
}

export { BankCardFace };