import { Grid as Grid$1 } from "../../../UI/Grid.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { Card, CardContent, Chip, Typography } from "@material-ui/core";
import visaLogo from "../../../assets/paymentIcons/visa-logo.svg";
import masterCardLogo from "../../../assets/paymentIcons/mastercard-logo.svg";
import discoverLogo from "../../../assets/paymentIcons/discover-logo.svg";
import americaExpressLogo from "../../../assets/paymentIcons/american-logo.svg";
//#region src/utilities/form/paymentForm/PaymentCardDetail.tsx
const logos = {
	visa: visaLogo,
	mastercard: masterCardLogo,
	discover: discoverLogo,
	amex: americaExpressLogo,
	default: visaLogo
};
/**
* PaymentCardDetail component displays the details of a payment card.
* 
* @param {Object} props - The component props.
* @param {CardData} props.cardData - The data of the payment card.
* @param {string} props.cardData.paymentToken - The token of the payment card.
* @param {string} props.cardData.expirationDate - The expiration date of the payment card.
* @param {boolean} props.cardData.active - The active status of the payment card.
* 
* @returns {JSX.Element} The rendered PaymentCardDetail component.
* 
* The component displays the card logo, nickname, and expiration date.
* If the card is expired, it shows an "Expired" chip.
* The card logo is determined based on the nickname of the card.
*/
const PaymentCardDetail = (t0) => {
	const $ = c(65);
	const { cardData } = t0;
	let T0;
	let T1;
	let T2;
	let T3;
	let T4;
	let isExpired;
	let styles;
	let t1;
	let t10;
	let t11;
	let t12;
	let t13;
	let t14;
	let t15;
	let t16;
	let t2;
	let t3;
	let t4;
	let t5;
	let t6;
	let t7;
	let t8;
	let t9;
	if ($[0] !== cardData) {
		const { paymentToken, expirationDate, active } = cardData || {};
		isExpired = new Date(expirationDate) < /* @__PURE__ */ new Date() && !active;
		const getCardLogo = _temp;
		let t17;
		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
			t17 = {
				card: {
					border: 0,
					padding: "5px 15px",
					width: "100%"
				},
				logoContainer: {
					border: "2px solid #e0e0e0",
					borderRadius: "8px",
					padding: "8px",
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					height: "42px",
					width: "70px"
				},
				logoImage: {
					width: 55,
					height: "auto",
					objectFit: "contain"
				},
				nickname: { fontWeight: 600 },
				expiration: { fontWeight: 400 },
				expiredChip: { fontWeight: "bold" }
			};
			$[24] = t17;
		} else t17 = $[24];
		styles = t17;
		T4 = Card;
		t15 = "outlined";
		t16 = styles.card;
		T3 = CardContent;
		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
			t14 = { padding: "5px 0" };
			$[25] = t14;
		} else t14 = $[25];
		T2 = Grid$1;
		t10 = true;
		t11 = "center";
		t12 = 2;
		const t18 = /* @__PURE__ */ React.createElement("div", { style: styles.logoContainer }, /* @__PURE__ */ React.createElement("img", {
			src: getCardLogo(paymentToken?.nickname || ""),
			alt: "Card Logo",
			style: styles.logoImage
		}));
		if ($[26] !== t18) {
			t13 = /* @__PURE__ */ React.createElement(Grid$1, { item: true }, t18);
			$[26] = t18;
			$[27] = t13;
		} else t13 = $[27];
		T1 = Grid$1;
		t7 = true;
		t8 = true;
		t9 = /* @__PURE__ */ React.createElement(Typography, {
			variant: "body1",
			style: styles.nickname
		}, paymentToken?.nickname || "Unknown Card");
		T0 = Typography;
		t1 = "subtitle2";
		t2 = "textSecondary";
		t3 = styles.expiration;
		t4 = "Exp. date: ";
		t5 = " ";
		t6 = expirationDate ? new Date(expirationDate).toLocaleDateString("en-US", {
			month: "2-digit",
			year: "2-digit"
		}) : "N/A";
		$[0] = cardData;
		$[1] = T0;
		$[2] = T1;
		$[3] = T2;
		$[4] = T3;
		$[5] = T4;
		$[6] = isExpired;
		$[7] = styles;
		$[8] = t1;
		$[9] = t10;
		$[10] = t11;
		$[11] = t12;
		$[12] = t13;
		$[13] = t14;
		$[14] = t15;
		$[15] = t16;
		$[16] = t2;
		$[17] = t3;
		$[18] = t4;
		$[19] = t5;
		$[20] = t6;
		$[21] = t7;
		$[22] = t8;
		$[23] = t9;
	} else {
		T0 = $[1];
		T1 = $[2];
		T2 = $[3];
		T3 = $[4];
		T4 = $[5];
		isExpired = $[6];
		styles = $[7];
		t1 = $[8];
		t10 = $[9];
		t11 = $[10];
		t12 = $[11];
		t13 = $[12];
		t14 = $[13];
		t15 = $[14];
		t16 = $[15];
		t2 = $[16];
		t3 = $[17];
		t4 = $[18];
		t5 = $[19];
		t6 = $[20];
		t7 = $[21];
		t8 = $[22];
		t9 = $[23];
	}
	let t17;
	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6) {
		t17 = /* @__PURE__ */ React.createElement(T0, {
			variant: t1,
			color: t2,
			style: t3
		}, t4, t5, t6);
		$[28] = T0;
		$[29] = t1;
		$[30] = t2;
		$[31] = t3;
		$[32] = t4;
		$[33] = t5;
		$[34] = t6;
		$[35] = t17;
	} else t17 = $[35];
	let t18;
	if ($[36] !== T1 || $[37] !== t17 || $[38] !== t7 || $[39] !== t8 || $[40] !== t9) {
		t18 = /* @__PURE__ */ React.createElement(T1, {
			item: t7,
			xs: t8
		}, t9, t17);
		$[36] = T1;
		$[37] = t17;
		$[38] = t7;
		$[39] = t8;
		$[40] = t9;
		$[41] = t18;
	} else t18 = $[41];
	let t19;
	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
		t19 = { marginRight: "15px" };
		$[42] = t19;
	} else t19 = $[42];
	let t20;
	if ($[43] !== isExpired || $[44] !== styles.expiredChip) {
		t20 = isExpired && /* @__PURE__ */ React.createElement(Chip, {
			label: "Expired",
			color: "secondary",
			size: "small",
			style: styles.expiredChip
		});
		$[43] = isExpired;
		$[44] = styles.expiredChip;
		$[45] = t20;
	} else t20 = $[45];
	let t21;
	if ($[46] !== t20) {
		t21 = /* @__PURE__ */ React.createElement(Grid$1, {
			item: true,
			style: t19
		}, t20);
		$[46] = t20;
		$[47] = t21;
	} else t21 = $[47];
	let t22;
	if ($[48] !== T2 || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t18 || $[54] !== t21) {
		t22 = /* @__PURE__ */ React.createElement(T2, {
			container: t10,
			alignItems: t11,
			spacing: t12
		}, t13, t18, t21);
		$[48] = T2;
		$[49] = t10;
		$[50] = t11;
		$[51] = t12;
		$[52] = t13;
		$[53] = t18;
		$[54] = t21;
		$[55] = t22;
	} else t22 = $[55];
	let t23;
	if ($[56] !== T3 || $[57] !== t14 || $[58] !== t22) {
		t23 = /* @__PURE__ */ React.createElement(T3, { style: t14 }, t22);
		$[56] = T3;
		$[57] = t14;
		$[58] = t22;
		$[59] = t23;
	} else t23 = $[59];
	let t24;
	if ($[60] !== T4 || $[61] !== t15 || $[62] !== t16 || $[63] !== t23) {
		t24 = /* @__PURE__ */ React.createElement(T4, {
			variant: t15,
			style: t16
		}, t23);
		$[60] = T4;
		$[61] = t15;
		$[62] = t16;
		$[63] = t23;
		$[64] = t24;
	} else t24 = $[64];
	return t24;
};
function _temp(nickname) {
	const lowerNickname = nickname?.toLowerCase();
	if (lowerNickname.includes("visa")) return logos.visa;
	if (lowerNickname.includes("mc")) return logos.mastercard;
	if (lowerNickname.includes("disc")) return logos.discover;
	if (lowerNickname.includes("amex") || lowerNickname.includes("american express")) return logos.amex;
	return logos.default;
}
//#endregion
export { PaymentCardDetail };

//# sourceMappingURL=PaymentCardDetail.mjs.map