import React from "react";
import { Card, CardContent, Chip, Typography } from "@material-ui/core";
import { Grid } from "../../../UI/Grid";
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";
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.
 */
export const PaymentCardDetail = ({ cardData }) => {
    const { paymentToken, expirationDate, active } = cardData || {};
    const isExpired = new Date(expirationDate) < new Date() && !active;
    const getCardLogo = (nickname) => {
        const lowerNickname = nickname === null || nickname === void 0 ? void 0 : 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;
    };
    const styles = {
        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",
        },
    };
    return (React.createElement(Card, { variant: "outlined", style: styles.card }, React.createElement(CardContent, { style: { padding: "5px 0" } }, React.createElement(Grid, { container: true, alignItems: "center", spacing: 2 }, React.createElement(Grid, { item: true }, React.createElement("div", { style: styles.logoContainer }, React.createElement("img", { src: getCardLogo((paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || ""), alt: "Card Logo", style: styles.logoImage }))), React.createElement(Grid, { item: true, xs: true }, React.createElement(Typography, { variant: "body1", style: styles.nickname }, (paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || "Unknown Card"), React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", style: styles.expiration }, "Exp. date: ", " ", expirationDate
        ? new Date(expirationDate).toLocaleDateString("en-US", {
            month: "2-digit",
            year: "2-digit",
        })
        : "N/A")), React.createElement(Grid, { item: true, style: { marginRight: "15px" } }, isExpired && (React.createElement(Chip, { label: "Expired", color: "secondary", size: "small", style: styles.expiredChip })))))));
};
//# sourceMappingURL=PaymentCardDetail.js.map