import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useState } from "react";
import { ChainListView } from "../../../../block/pickers/chainPicker";
import Button from "../../../../button";
import { ARBITRUM_MAINNET_CHAINID_HEX, ARBITRUM_TESTNET_CHAINID_HEX } from "@orderly.network/types";
import { useChains, OrderlyContext, useWalletConnector } from "@orderly.network/hooks";
import { ArrowIcon, NetworkImage } from "../../../../icon";
import { OrderlyAppContext } from "../../../../provider";
import { cn } from "../../../../utils/css";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "../../../../dropdown/dropdown";
import { isTestnet } from "@orderly.network/utils";
export const Chains = (props)=>{
    const { disabled } = props;
    const [open, setOpen] = useState(false);
    const { networkId } = useContext(OrderlyContext);
    const { onChainChanged } = useContext(OrderlyAppContext);
    const [defaultChain, setDefaultChain] = useState(networkId === "mainnet" ? ARBITRUM_MAINNET_CHAINID_HEX : ARBITRUM_TESTNET_CHAINID_HEX);
    const [testChains] = useChains("testnet", {
        pick: "network_infos",
        filter: (item)=>isTestnet(item.network_infos?.chain_id)
    });
    const [mainChains, { findByChainId }] = useChains("mainnet", {
        pick: "network_infos",
        filter: (chain)=>chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
    });
    const { connectedChain, setChain, settingChain } = useWalletConnector();
    const resetDefaultChain = useCallback(()=>{
        if (networkId === "mainnet" && defaultChain !== ARBITRUM_MAINNET_CHAINID_HEX) {
            setDefaultChain(ARBITRUM_MAINNET_CHAINID_HEX);
        } else if (networkId === "testnet" && defaultChain !== ARBITRUM_TESTNET_CHAINID_HEX) {
            setDefaultChain(ARBITRUM_TESTNET_CHAINID_HEX);
        }
    }, [
        defaultChain
    ]);
    const chainName = useMemo(()=>{
        const chain = findByChainId(// @ts-ignore
        parseInt(connectedChain?.id || defaultChain), "network_infos");
        if (!chain) return /*#__PURE__*/ _jsx("span", {
            children: "Unknown"
        });
        // @ts-ignore
        if (isTestnet(chain.chain_id)) {
            return /*#__PURE__*/ _jsx("span", {
                children: "Testnet"
            });
        }
        // @ts-ignore
        return /*#__PURE__*/ _jsx(NetworkImage, {
            id: chain.chain_id,
            type: "chain",
            size: 16
        });
    }, [
        connectedChain,
        findByChainId,
        defaultChain
    ]);
    const switchDomain = (chainId)=>{
        // const domain = configStore.get("domain");
        // const url = isTestnet(chainId) ? domain?.testnet : domain?.mainnet;
        // window.location.href = url;
        // window.open(url); // test in storybook
        // console.log("onChainChanged", chainId, isTestnet(chainId), onChainChanged);
        if (onChainChanged) {
            onChainChanged(chainId, isTestnet(chainId));
        }
    };
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        open: open,
        onOpenChange: setOpen,
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                children: /*#__PURE__*/ _jsx("div", {
                    className: "orderly-h-[48px] orderly-flex orderly-items-center",
                    children: /*#__PURE__*/ _jsxs(Button, {
                        variant: "outlined",
                        size: "small",
                        color: "buy",
                        loading: settingChain,
                        disabled: disabled,
                        className: cn("orderly-border-primary orderly-gap-1 orderly-text-base-contrast orderly-h-[30px] hover:orderly-text-primary-light hover:orderly-bg-transparent active:orderly-bg-transparent", props.className),
                        onClick: ()=>{
                            setOpen((value)=>!value);
                        },
                        children: [
                            chainName,
                            /*#__PURE__*/ _jsx(ArrowIcon, {
                                size: 8,
                                className: "orderly-text-base-contrast-54"
                            })
                        ]
                    })
                })
            }),
            /*#__PURE__*/ _jsx(DropdownMenuContent, {
                onCloseAutoFocus: (e)=>e.preventDefault(),
                align: "end",
                sideOffset: -1,
                className: "orderly-max-h-[360px] orderly-max-w-[260px] orderly-overflow-y-auto orderly-bg-base-800 orderly-hide-scrollbar orderly-rounded-borderRadius orderly-shadow-[0px_12px_20px_0px_rgba(0,0,0,0.25)]",
                children: /*#__PURE__*/ _jsx(ChainListView, {
                    // @ts-ignore
                    mainChains: mainChains,
                    // @ts-ignore
                    testChains: testChains,
                    // @ts-ignore
                    onItemClick: (item)=>{
                        setOpen(false);
                        if (connectedChain) {
                            setChain({
                                chainId: item.id
                            }).then((success)=>{
                                // reset default chain when switch to connected chain
                                resetDefaultChain();
                                if (success) {
                                    switchDomain(item.id);
                                }
                            });
                        } else {
                            setDefaultChain(item.id);
                            switchDomain(item.id);
                        }
                    },
                    // @ts-ignore
                    currentChainId: parseInt(connectedChain?.id || defaultChain)
                })
            })
        ]
    });
};

//# sourceMappingURL=chains.desktop.js.map