var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import React, { useState, useEffect, useRef } from 'react';
import './../../styles/gasPrice.sass';
import './../../styles/gasPriceDefault.sass';
import { useAsync } from '../../hooks/useAsync';
import { EMPTY_GAS_OPTION, ensureNotFalsy, ETHER_NATIVE_TOKEN, findGasMode, findGasOption, FAST_GAS_MODE_INDEX } from '@universal-login/commons';
import { getStyleForTopLevelComponent } from '../../../core/utils/getStyleForTopLevelComponent';
import { useAsyncEffect } from '../../hooks/useAsyncEffect';
import { GasPriceSpeedChoose } from './GasPriceSpeed';
import { TransactionFeeChoose } from './TransactionFeeChoose';
import { SelectedGasPrice } from './SelectedGasPrice';
import { useOutsideClick } from '../../hooks/useClickOutside';
import { Spinner } from '../Spinner';
export var GasPrice = function (_a) {
    var _b = _a.isDeployed, isDeployed = _b === void 0 ? true : _b, deployedWallet = _a.deployedWallet, sdk = _a.sdk, gasLimit = _a.gasLimit, onGasParametersChanged = _a.onGasParametersChanged, className = _a.className;
    var _c = __read(useState([]), 2), tokenDetailsWithBalance = _c[0], setTokenDetailsWithBalance = _c[1];
    useAsyncEffect(function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            if (isDeployed) {
                ensureNotFalsy(deployedWallet, Error, 'Missing parameter: deployedWallet');
                return [2 /*return*/, deployedWallet.subscribeToBalances(setTokenDetailsWithBalance)];
            }
            else {
                ensureNotFalsy(sdk, Error, 'Missing parameter: sdk');
            }
            return [2 /*return*/];
        });
    }); }, [isDeployed, deployedWallet]);
    var _d = __read(useAsync(function () { return isDeployed ? deployedWallet.getGasModes() : sdk.getGasModes(); }, []), 1), gasModes = _d[0];
    var _e = __read(useState(''), 2), modeName = _e[0], setModeName = _e[1];
    var _f = __read(useState('0'), 2), usdAmount = _f[0], setUsdAmount = _f[1];
    var _g = __read(useState(EMPTY_GAS_OPTION), 2), gasOption = _g[0], setGasOption = _g[1];
    var onModeChanged = function (name, usdAmount) {
        var gasTokenAddress = gasOption.token.address;
        var gasOptions = findGasMode(gasModes, name).gasOptions;
        setModeName(name);
        setUsdAmount(usdAmount);
        onGasOptionChanged(findGasOption(gasOptions, gasTokenAddress));
    };
    var onGasOptionChanged = function (gasOption) {
        setGasOption(gasOption);
        onGasParametersChanged({
            gasPrice: gasOption.gasPrice,
            gasToken: gasOption.token.address,
        });
    };
    var onGasOptionSelected = function (gasOption) {
        onGasOptionChanged(gasOption);
        setContentVisibility(function (visibility) { return !visibility; });
    };
    useEffect(function () {
        if (gasModes) {
            var _a = gasModes[FAST_GAS_MODE_INDEX], name_1 = _a.name, usdAmount_1 = _a.usdAmount;
            var gasOption_1 = findGasOption(gasModes[FAST_GAS_MODE_INDEX].gasOptions, ETHER_NATIVE_TOKEN.address);
            setUsdAmount(usdAmount_1);
            setModeName(name_1);
            onGasOptionChanged(gasOption_1);
        }
    }, [gasModes]);
    var _h = __read(useState(false), 2), contentVisibility = _h[0], setContentVisibility = _h[1];
    var ref = useRef(null);
    useOutsideClick(ref, function () {
        if (contentVisibility) {
            setContentVisibility(false);
        }
    });
    var renderComponent = function (gasModes) { return (React.createElement("div", { className: "universal-login-gas" },
        React.createElement("div", { className: getStyleForTopLevelComponent(className) },
            React.createElement("div", { className: "gas-price" },
                React.createElement(GasPriceTitle, null),
                React.createElement("div", { className: "gas-price-dropdown" },
                    React.createElement(SelectedGasPrice, { modeName: modeName, gasLimit: gasLimit, usdAmount: usdAmount, gasOption: gasOption, onClick: function () { return setContentVisibility(!contentVisibility); } }),
                    contentVisibility &&
                        React.createElement("div", { ref: ref, className: "gas-price-selector" },
                            React.createElement(GasPriceTitle, null),
                            React.createElement(GasPriceSpeedChoose, { gasModes: gasModes, modeName: modeName, onModeChanged: onModeChanged }),
                            React.createElement(TransactionFeeChoose, { gasModes: gasModes, modeName: modeName, tokenAddress: gasOption.token.address, gasLimit: gasLimit, usdAmount: usdAmount, tokensDetailsWithBalance: tokenDetailsWithBalance, onGasOptionChanged: onGasOptionSelected }))))))); };
    return (gasModes ? renderComponent(gasModes) : React.createElement(Spinner, { className: "spinner-small" }));
};
var GasPriceTitle = function () { return (React.createElement("div", { className: "gas-price-top" },
    React.createElement("p", { className: "gas-price-title" }, "Transaction details"),
    React.createElement("div", { className: "gas-price-hint" },
        React.createElement("p", { className: "gas-price-tooltip" }, "Choose transaction speed and token")))); };
//# sourceMappingURL=GasPrice.js.map