import React from "react";
import { Button, Card, CardContent, Chip, IconButton } from "@material-ui/core";
import { Grid } from "../../../UI/Grid";
import { Typography } from "../../../UI/dataDisplay/typography/Typography";
import { Delete as DeleteIcon } from "@material-ui/icons";
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 americanExpressLogo from "../../../assets/paymentIcons/american-logo.svg";
import { SvgIcon } from "../../iconLibrary/SvgIcon";
const logos = {
    visa: visaLogo,
    mastercard: masterCardLogo,
    discover: discoverLogo,
    amex: americanExpressLogo,
    default: visaLogo,
};
/**
 * PaymentBoxDetail component displays detailed information about a payment card.
 *
 * @param {Object} props - The component props.
 * @param {CardData} props.cardData - The data of the card to be displayed.
 * @param {string} props.cardData.paymentToken - The token representing the payment card.
 * @param {string} props.cardData.expirationDate - The expiration date of the card.
 * @param {boolean} props.cardData.active - Indicates if the card is the default payment method.
 * @param {string} props.cardData.paymentTokenID - The unique identifier for the payment token.
 *
 * @returns {JSX.Element} The rendered PaymentBoxDetail component.
 *
 * The component includes:
 * - Card logo with a border.
 * - Card details including nickname and expiration date.
 * - Actions to set the card as default or indicate if it is the default card.
 * - Expiration status if the card is expired.
 * - A delete button to remove the card.
 */
export const PaymentBoxDetail = ({ cardData }) => {
    const { paymentToken, expirationDate, active, paymentTokenID } = cardData || {};
    const isExpired = new Date(expirationDate) < new Date();
    const getCardBrand = (nickname) => {
        var _a;
        var _b;
        const lower = (_b = (_a = nickname === null || nickname === void 0 ? void 0 : nickname.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(nickname)) !== null && _b !== void 0 ? _b : "";
        if (lower.includes("visa"))
            return "visa";
        if (lower.includes("mc"))
            return "mastercard";
        if (lower.includes("disc"))
            return "discover";
        if (lower.includes("amex") || lower.includes("american express"))
            return "amex";
        return "default";
    };
    return (React.createElement(Card, { variant: "outlined", style: { marginBottom: 16 } }, React.createElement(CardContent, null, React.createElement(Grid, { container: true, alignItems: "center", spacing: 2 }, React.createElement(Grid, { item: true }, React.createElement("div", { style: {
            border: "2px solid #e0e0e0",
            borderRadius: "8px",
            padding: "8px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "50px",
            width: "70px",
        } }, (() => {
        const brand = getCardBrand((paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || "");
        const src = logos[brand];
        const alt = brand === "default" ? "Card Logo" : `${brand} logo`;
        return (React.createElement(SvgIcon, { src: src, height: 18, style: { objectFit: "contain" }, alt: alt }));
    })())), React.createElement(Grid, { item: true, xs: true }, React.createElement(Typography, { variant: "body1", style: { fontWeight: 600 } }, (paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || "Unknown Card"), React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", style: { fontWeight: 400 } }, "Exp. date:", " ", expirationDate
        ? new Date(expirationDate).toLocaleDateString("en-US", {
            month: "2-digit",
            year: "2-digit",
        })
        : "N/A")), React.createElement(Grid, { item: true }, active ? (React.createElement(Chip, { label: "Default", color: "default", size: "small", style: {
            backgroundColor: "#212121", // Dark background
            color: "#FFFFFF", // White text
            fontWeight: "bold",
            borderRadius: "16px", // Rounded corners
            height: "28px",
        } })) : (React.createElement(Button, { size: "small", variant: "outlined", style: { textTransform: "none" } }, "Set as Defaul"))), React.createElement(Grid, { item: true }, isExpired && (React.createElement(Chip, { label: "Expired", color: "secondary", size: "small", style: { fontWeight: "bold" } }))), React.createElement(Grid, { item: true }, React.createElement(IconButton, { color: "secondary", onClick: () => console.log("Delete", paymentTokenID), size: "small" }, React.createElement(DeleteIcon, null)))))));
};
//# sourceMappingURL=PaymentBoxDetail.js.map