"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    DepositAndWithdraw: function() {
        return DepositAndWithdraw;
    },
    DepositAndWithdrawWithDialog: function() {
        return DepositAndWithdrawWithDialog;
    },
    DepositAndWithdrawWithSheet: function() {
        return DepositAndWithdrawWithSheet;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _tab = require("../../tab");
const _react = require("react");
const _withdraw = require("../withdraw");
const _modalHelper = require("../../modal/modalHelper");
const _modal = require("../../modal");
const _sheet = require("../../sheet");
const _assetsProvider = require("../../provider/assetsProvider");
const _dialog = require("../../dialog");
const _slot = require("./slot");
const _icon = require("../../icon");
const DepositAndWithdraw = (props)=>{
    const [value, setValue] = (0, _react.useState)(()=>props.activeTab ?? "deposit");
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_assetsProvider.AssetsProvider, {
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_tab.Tabs, {
            id: "orderly-deposit-and-withdraw",
            value: value,
            onTabChange: setValue,
            tabBarClassName: "orderly-border-b-0 orderly-px-0",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_tab.TabPane, {
                    id: "orderly-deposit-pane",
                    title: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-items-center orderly-gap-1 orderly-text-xs desktop:orderly-text-lg",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.ArrowDownToLineIcon, {
                                className: "orderly-w-[10px] orderly-h-[10px] desktop:orderly-w-[16px] desktop:orderly-h-[16px]"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                children: "Deposit"
                            })
                        ]
                    }),
                    value: "deposit",
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-py-3 orderly-px-[2px]",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_slot.DepositSlot, {
                            onOk: props.onOk
                        })
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_tab.TabPane, {
                    id: "orderly-withdraw-pane",
                    title: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-items-center orderly-gap-1 orderly-text-xs desktop:orderly-text-lg",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.ArrowDownToLineIcon, {
                                className: "orderly-w-[10px] orderly-h-[10px] desktop:orderly-w-[16px] desktop:orderly-h-[16px] orderly-rotate-180"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                children: "Withdraw"
                            })
                        ]
                    }),
                    value: "withdraw",
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-py-3 orderly-px-[2px]",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_withdraw.Withdraw, {
                            onOk: props.onOk
                        })
                    })
                })
            ]
        })
    });
};
const DepositAndWithdrawWithSheet = (0, _modalHelper.create)((props)=>{
    const { visible, hide, resolve, reject, onOpenChange } = (0, _modal.useModal)();
    const onOk = (data)=>{
        resolve(data);
        hide();
    };
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_sheet.Sheet, {
        open: visible,
        onOpenChange: onOpenChange,
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sheet.SheetContent, {
            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DepositAndWithdraw, {
                activeTab: props.activeTab,
                onOk: onOk
            })
        })
    });
});
const DepositAndWithdrawWithDialog = (0, _modalHelper.create)((props)=>{
    const { visible, hide, resolve, reject, onOpenChange } = (0, _modal.useModal)();
    const [top, setTop] = (0, _react.useState)("20%");
    const onOk = (data)=>{
        resolve(data);
        hide();
    };
    (0, _react.useEffect)(()=>{
        setTop((window.innerHeight - 500) * 0.5);
    }, [
        window.innerHeight
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.Dialog, {
        open: visible,
        onOpenChange: onOpenChange,
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.DialogContent, {
            style: {
                top
            },
            className: "orderly-p-5 orderly-top-[20%] orderly-translate-y-0",
            maxWidth: "lg",
            closable: true,
            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DepositAndWithdraw, {
                activeTab: props.activeTab,
                onOk: onOk
            })
        })
    });
});

//# sourceMappingURL=depositAndwithdraw.js.map