"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaymentCard = void 0;
const react_1 = __importDefault(require("react"));
const react_i18next_1 = require("react-i18next");
const VGSHooks_1 = require("../../../hooks/VGSHooks");
const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
const Translation_1 = require("../../../translations/Translation");
const PaymentCardHelper_1 = require("../../../util/PaymentCardHelper");
const SmallSpinner_1 = __importDefault(require("../loader/SmallSpinner"));
const PaymentCard_module_scss_1 = __importDefault(require("./PaymentCard.module.scss"));
const PaymentCard = ({ card }) => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const labelStyles = {
        '@font-face': {
            src: `url(${RoomstayThemeEngine_1.default.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,
            'font-weight': 'bold',
            'font-display': 'swap',
            'font-family': 'Cadiz',
        },
        'font-size': '18px',
        'line-height': '24px',
        'font-weight': 'bold',
        'font-family': 'Cadiz',
        color: 'white',
    };
    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = (0, VGSHooks_1.useVgsShow)({
        name: 'credit-card',
        value: card.cardNumber,
        styles: Object.assign(Object.assign({}, labelStyles), { 'word-spacing': '16px' }),
    });
    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = (0, VGSHooks_1.useVgsShow)({
        name: 'card-name',
        value: card.name,
        styles: labelStyles,
    });
    const cardGraphic = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(card.type);
    return (react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.card },
        react_1.default.createElement("img", { className: "u-w-100", src: cardGraphic.backgroundUrl, alt: "Payment card background color" }),
        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.chip },
            react_1.default.createElement("img", { src: RoomstayThemeEngine_1.default.getImageAssetUrl() + 'chip.svg', alt: "Chip" })),
        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.type },
            react_1.default.createElement("img", { src: cardGraphic.cardNameIconUrl, alt: `Payment card type ${card.type}` })),
        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.number },
            isCardNumberLoading && react_1.default.createElement(SmallSpinner_1.default, null),
            react_1.default.createElement("span", { ref: cardNumberTargetElement })),
        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.name },
            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, t(Translation_1.Translation.Step.Confirmation.PaymentCard.CardHolderName)),
            react_1.default.createElement("div", null,
                isCardholderNameLoading && react_1.default.createElement(SmallSpinner_1.default, null),
                react_1.default.createElement("span", { ref: cardholderNameTargetElement }))),
        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.date },
            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, t(Translation_1.Translation.Step.Confirmation.PaymentCard.ExpiryDate)),
            card.expiry ? react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.value }, card.expiry) : react_1.default.createElement("br", { className: PaymentCard_module_scss_1.default.value }))));
};
exports.PaymentCard = PaymentCard;
//# sourceMappingURL=PaymentCard.js.map