import React from 'react';
import { RadioButton } from './RadioButton';
import { getBalanceOf, safeMultiply } from '@universal-login/commons';
import { isGasTokenDisabled } from '../../../core/utils/isGasTokenDisabled';
import { calculateTransactionFee } from '../../../core/utils/calculateTransactionFee';
import { getIconForToken } from '../../../core/utils/getIconForToken';
export var 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.createElement("div", { className: "transaction-fee-balance" },
        React.createElement("p", { className: "transaction-fee-balance-text" }, "Your balance"),
        React.createElement("p", { className: "transaction-fee-balance-amount" },
            getBalanceOf(option.token.symbol, tokensDetailsWithBalance),
            " ",
            option.token.symbol))) : null; };
    return (React.createElement("div", { className: "transaction-fee" },
        React.createElement("p", { className: "transaction-fee-title" }, "Transaction fee"),
        React.createElement("ul", { className: "transaction-fee-list" }, gasModes.filter(function (gasMode) { return gasMode.name === modeName; })[0].gasOptions.map(function (option) { return (React.createElement("li", { key: option.token.address, className: "transaction-fee-item" },
            React.createElement(RadioButton, { disabled: isGasTokenDisabled(option.token.symbol), id: "token-" + option.token.address, name: "fee", checked: option.token.address === tokenAddress, onClick: function () { return onGasOptionChanged(option); } },
                React.createElement("div", { className: "transaction-fee-row" },
                    React.createElement("img", { src: getIconForToken(option.token.symbol), alt: option.token.symbol, className: "transaction-fee-item-icon" }),
                    React.createElement("div", { className: "transaction-fee-details" },
                        React.createElement("div", null,
                            React.createElement("p", { className: "transaction-fee-amount-usd" },
                                calculateTransactionFee(usdAmount, gasLimit),
                                " USD"),
                            React.createElement("p", { className: "transaction-fee-amount" },
                                safeMultiply(option.gasPrice, gasLimit),
                                " ",
                                option.token.symbol))),
                    renderBalance(option))))); }))));
};
//# sourceMappingURL=TransactionFeeChoose.js.map