import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useState } from "react";
import { ChainListView } from "../../../block/pickers/chainPicker";
import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTrigger } from "../../../dialog";
import { useChains } from "@orderly.network/hooks";
import { toast } from "../../../toast";
import { useTranslation } from "../../../i18n";
import { OrderlyAppContext } from "../../../provider";
import Button from "../../../button";
import { isTestnet } from "@orderly.network/utils";
import { cn } from "../../../utils";
export const ChainIdSwtich = (props)=>{
    const [open, setOpen] = useState(false);
    const { onChainChanged } = useContext(OrderlyAppContext);
    const [testChains] = useChains("testnet", {
        pick: "network_infos",
        filter: (item)=>isTestnet(item.network_infos?.chain_id)
    });
    const [mainChains] = useChains("mainnet", {
        pick: "network_infos",
        filter: (chain)=>chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
    });
    const t = useTranslation();
    const onChainChange = useCallback(({ id, name })=>{
        props.onSetChain(id).then((isSuccess)=>{
            if (isSuccess) {
                toast.success(t("toast.networkSwitched"));
                if (onChainChanged) {
                    onChainChanged(id, isTestnet(id));
                }
            } else {
                toast.error(t("common.cancel"));
            }
        }, (error)=>{
            toast.error(error.message);
        }).finally(()=>setOpen(false));
    }, []);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-bg-warning-darken orderly-fixed orderly-left-0 orderly-right-0 orderly-bottom-[64px] orderly-text-warning orderly-z-10 orderly-text-3xs orderly-font-semibold orderly-leading-[18px] orderly-p-[10px]", "desktop:orderly-h-[40px] desktop:orderly-text-sm desktop:orderly-flex desktop:orderly-items-center desktop:orderly-justify-center desktop:orderly-static"),
        children: [
            /*#__PURE__*/ _jsx("span", {
                children: "Please connect to a supported network."
            }),
            /*#__PURE__*/ _jsxs(Dialog, {
                open: open,
                onOpenChange: setOpen,
                children: [
                    /*#__PURE__*/ _jsxs(DialogTrigger, {
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "desktop:orderly-hidden orderly-text-link-light orderly-ml-[2px]",
                                children: "Switch network"
                            }),
                            /*#__PURE__*/ _jsx(Button, {
                                variant: "outlined",
                                size: "small",
                                className: "orderly-hidden desktop:orderly-block orderly-text-warning orderly-border-warning hover:orderly-text-warning orderly-px-[8px] orderly-ml-[10px] orderly-text-3xs desktop:orderly-text-3xs",
                                children: "Switch network"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(DialogContent, {
                        closable: true,
                        children: [
                            /*#__PURE__*/ _jsx(DialogHeader, {
                                className: "orderly-switch-network-dialog-title orderly-text-xs",
                                children: "Switch network"
                            }),
                            /*#__PURE__*/ _jsx(DialogBody, {
                                className: "orderly-max-h-[327.5px] orderly-overflow-y-auto orderly-text-3xs",
                                children: /*#__PURE__*/ _jsx(ChainListView, {
                                    // @ts-ignore
                                    mainChains: mainChains,
                                    // @ts-ignore
                                    testChains: testChains,
                                    // @ts-ignore
                                    onItemClick: onChainChange
                                })
                            })
                        ]
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=chainIdSwitch.js.map