"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var RadioButton_1 = require("./RadioButton");
var commons_1 = require("@universal-login/commons");
var isGasTokenDisabled_1 = require("../../../core/utils/isGasTokenDisabled");
var calculateTransactionFee_1 = require("../../../core/utils/calculateTransactionFee");
var getIconForToken_1 = require("../../../core/utils/getIconForToken");
exports.TransactionFeeChoose = function (_a) {
    var gasModes = _a.gasModes, gasLimit = _a.gasLimit, onGasOptionChanged = _a.onGasOptionChanged, modeName = _a.modeName, tokenAddress = _a.tokenAddress, tokensDetailsWithBalance = _a.tokensDetailsWithBalance, usdAmount = _a.usdAmount;
    var renderBalance = function (option) { return tokensDetailsWithBalance ? (react_1.default.createElement("div", { className: "transaction-fee-balance" },
        react_1.default.createElement("p", { className: "transaction-fee-balance-text" }, "Your balance"),
        react_1.default.createElement("p", { className: "transaction-fee-balance-amount" },
            commons_1.getBalanceOf(option.token.symbol, tokensDetailsWithBalance),
            " ",
            option.token.symbol))) : null; };
    return (react_1.default.createElement("div", { className: "transaction-fee" },
        react_1.default.createElement("p", { className: "transaction-fee-title" }, "Transaction fee"),
        react_1.default.createElement("ul", { className: "transaction-fee-list" }, gasModes.filter(function (gasMode) { return gasMode.name === modeName; })[0].gasOptions.map(function (option) { return (react_1.default.createElement("li", { key: option.token.address, className: "transaction-fee-item" },
            react_1.default.createElement(RadioButton_1.RadioButton, { disabled: isGasTokenDisabled_1.isGasTokenDisabled(option.token.symbol), id: "token-" + option.token.address, name: "fee", checked: option.token.address === tokenAddress, onClick: function () { return onGasOptionChanged(option); } },
                react_1.default.createElement("div", { className: "transaction-fee-row" },
                    react_1.default.createElement("img", { src: getIconForToken_1.getIconForToken(option.token.symbol), alt: option.token.symbol, className: "transaction-fee-item-icon" }),
                    react_1.default.createElement("div", { className: "transaction-fee-details" },
                        react_1.default.createElement("div", null,
                            react_1.default.createElement("p", { className: "transaction-fee-amount-usd" },
                                calculateTransactionFee_1.calculateTransactionFee(usdAmount, gasLimit),
                                " USD"),
                            react_1.default.createElement("p", { className: "transaction-fee-amount" },
                                commons_1.safeMultiply(option.gasPrice, gasLimit),
                                " ",
                                option.token.symbol))),
                    renderBalance(option))))); }))));
};
//# sourceMappingURL=TransactionFeeChoose.js.map