import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import { currentTheme } from "../../theme";
import Input from "../input";
import { Box, Row } from "../grid";
import Select from "../select";
import TextBase from "../text";
import { useAssets } from "../../contexts/polkadot/assets";
import { trimNumber } from "../../utils/format";
import BackBtn from "./back";
import Success from "./deposit-success";
import { ActionWrapper } from "./styled";
import { useTheme } from "styled-components";
/**
 * @deprecated move to standalone module
 */
export const FirstDepositDetails = ({ asset, amount, price }) => {
    return (_jsxs(Box, { children: [_jsxs(TextBase.F1, { children: [asset, ": ", amount] }), _jsxs(TextBase.F1, { children: [asset, " price: ~", price, "$"] }), _jsx(Box, { mt: "8px", children: _jsx(TextBase.F2, { gray: true, children: t `With the first deposit we automatically exchange some of your funds to
        ${amount} ${asset} tokens so you may interact with Equilibrium parachain and pay trx
        fees.` }) })] }));
};
const Deposit = ({ onClose, token, setToken, network, children, scanUrl }) => {
    const { currencies } = useAssets();
    const [amount, setAmount] = React.useState();
    const [inputDisabled, setInputDisabled] = React.useState(false);
    const [step, setStep] = React.useState("");
    const [depositTx, setDepositTx] = React.useState();
    const ref = React.useRef({ currencies, token });
    const theme = useTheme();
    // FIXME
    React.useEffect(() => {
        ref.current.currencies = currencies;
        ref.current.token = token;
    }, [currencies, token]);
    React.useEffect(() => {
        const curr = ref.current.token;
        const tmp = ref.current.currencies?.find((c) => c !== curr);
        if (tmp) {
            setToken(tmp);
            setTimeout(() => setToken(curr));
        }
    }, [setToken]);
    // FIXME
    return (_jsxs(_Fragment, { children: [_jsx(BackBtn, { onClose: onClose }), _jsx(ActionWrapper, { className: "ui-action-wrapper", children: !depositTx ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "deposit-step", p: "16px 16px 4px 16px", children: _jsxs(Row, { spaceBetween: true, children: [_jsx(TextBase.H3, { as: "span", fontSize: 16, fontFamily: "Heavy", children: step }), _jsxs(TextBase.H3, { as: "span", fontSize: 16, fontFamily: "Heavy", gray: true, children: [step === "Deposit" && "1/3", step === "Approve transfers" && "2/3", step === "Confirm deposit" && "3/3"] })] }) }), _jsxs(_Fragment, { children: [_jsxs("div", { className: "input-token-row", children: [_jsx(Input, { title: t `Amount to deposit`, placeholder: "0", value: amount ?? "", onChange: (val) => {
                                                setAmount(trimNumber(val));
                                            }, disabled: inputDisabled, className: inputDisabled ? "ui-input--disabled" : "", width: "156px", amount: true, theme: theme?.input }), _jsx(Select, { onSelect: (val) => setToken(val), preselectedKey: token, width: "96px", disabled: inputDisabled, className: inputDisabled ? "ui-select--disabled" : "", theme: theme?.select, children: currencies?.map((token) => (_jsx(Select.Option, { style: { color: currentTheme.colors?.text }, children: token.toUpperCase() }, token))) /* TODO filter unavailable currencies on mainnet */ })] }), children({
                                    amount,
                                    setAmount,
                                    setInputDisabled,
                                    setDepositTx,
                                    setStep,
                                }), network?.dev && !amount && (_jsx(Box, { className: "label", m: "16px", children: _jsxs(TextBase.F2, { children: [_jsx(TextBase.F2, { fontFamily: "Bold", children: t `Warning!` }), t `This is a testnet, all the tokens are virtual tokens, which are simply balance updates.`] }) }))] })] })) : (_jsx(Success, { scanUrl: scanUrl, tx: {
                        transactionHash: depositTx.transactionHash,
                        from: depositTx.from,
                        to: depositTx.to,
                        blockNumber: depositTx.blockNumber,
                    }, amount: `${amount} ${token.toUpperCase()}`, onClose: onClose })) })] }));
};
export default Deposit;
//# sourceMappingURL=deposit.js.map