import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Button from "../../../button";
import { StatusGuardButton } from "../../../button/statusGuardButton";
import { useMemo } from "react";
import { ApproveButton } from "./approveButton";
import { Notice } from "./notice";
import { modal } from "../../../modal";
import { useChains } from "@orderly.network/hooks";
import { ChainDialog } from "../../../block/pickers/chainPicker/chainDialog";
export const ActionButton = (props)=>{
    const { chain, token, chains, onDeposit, switchChain, disabled, quantity, loading, allowance, onApprove, submitting, maxQuantity, warningMessage, chainNotSupport } = props;
    const [_, { findByChainId }] = useChains(undefined, {
        pick: "network_infos",
        filter: (chain)=>chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
    });
    const onOpenPicker = async ()=>{
        const result = await modal.show(ChainDialog, {
            testChains: chains,
            currentChainId: chain?.id
        });
        if (result?.id) {
            const chainInfo = findByChainId(result.id);
            props?.onChainChange?.(chainInfo);
        }
    };
    const chainWarningMessage = useMemo(()=>{
        if (!chainNotSupport) return "";
        return "Please connect to a supported network.";
    }, [
        chainNotSupport,
        chain?.info?.network_infos?.name
    ]);
    const actionButton = useMemo(()=>{
        if (!chainNotSupport) {
            return /*#__PURE__*/ _jsx(StatusGuardButton, {
                children: /*#__PURE__*/ _jsx(ApproveButton, {
                    onApprove: props.onApprove,
                    onDeposit: onDeposit,
                    allowance: allowance,
                    quantity: quantity,
                    submitting: submitting,
                    maxQuantity: maxQuantity,
                    token: token?.symbol,
                    label: "Deposit",
                    disabled: disabled,
                    buttonId: "orderly-deposit-confirm-button"
                })
            });
        }
        return /*#__PURE__*/ _jsx(Button, {
            fullWidth: true,
            onClick: onOpenPicker,
            id: "orderly-deposit-confirm-button",
            className: "desktop:orderly-text-xs",
            children: "Switch network"
        });
    }, [
        chainNotSupport,
        switchChain,
        disabled,
        chain,
        quantity,
        loading,
        allowance,
        onApprove,
        onDeposit,
        submitting,
        maxQuantity
    ]);
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-deposit-warning-message",
                children: chainNotSupport ? /*#__PURE__*/ _jsx("div", {
                    className: "orderly-text-warning orderly-text-4xs orderly-text-center orderly-px-[20px] orderly-pt-4 orderly-pb-3 desktop:orderly-text-2xs ",
                    children: chainWarningMessage
                }) : /*#__PURE__*/ _jsx(Notice, {
                    warningMessage: warningMessage
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex orderly-justify-center",
                children: /*#__PURE__*/ _jsx("div", {
                    className: "orderly-deposit-action-button-container orderly-w-full orderly-text-xs orderly-font-bold",
                    children: actionButton
                })
            })
        ]
    });
};

//# sourceMappingURL=actionButton.js.map