import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { modal, useModal } from "../../modal";
import { create } from "../../modal/modalHelper";
import { MEDIA_TABLET } from "@orderly.network/types";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../sheet";
import { toast } from "../../toast";
import { useAccount } from "@orderly.network/hooks";
import { useCallback } from "react";
import { WalletConnect } from "./walletConnect";
import { Logo } from "../../logo";
import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from "../../dialog";
const useWalletConnect = ()=>{
    const { visible, hide, resolve, reject, onOpenChange } = useModal();
    // get account status and handle sign in and enable trading
    const { account, createOrderlyKey, createAccount } = useAccount();
    const onSignIn = useCallback(()=>{
        return createAccount().catch((err)=>{
            reject();
            toast.error(err.message);
            hide();
        });
    }, [
        account
    ]);
    const onComplete = useCallback(()=>{
        toast.success("Wallet connected");
        resolve();
        hide();
    }, []);
    return {
        visible,
        hide,
        resolve,
        reject,
        onOpenChange,
        onSignIn,
        onComplete,
        createOrderlyKey
    };
};
export const WalletConnectSheet = create((props)=>{
    // const { visible, hide, resolve, reject, onOpenChange } = useModal();
    // // get account status and handle sign in and enable trading
    // const { account, createOrderlyKey, createAccount } = useAccount();
    // // @ts-ignore
    // const { logoUrl } = useContext(OrderlyContext);
    // const onSignIn = useCallback(() => {
    //   return createAccount().catch((err: Error) => {
    //     reject();
    //     toast.error(err.message);
    //     hide();
    //   });
    // }, [account]);
    // const onComplete = useCallback(() => {
    //   toast.success("Wallet connected");
    //   resolve();
    //   hide();
    // }, []);
    const { visible, hide, resolve, reject, onOpenChange, onSignIn, onComplete, createOrderlyKey } = useWalletConnect();
    return /*#__PURE__*/ _jsx(Sheet, {
        open: visible,
        onOpenChange: onOpenChange,
        children: /*#__PURE__*/ _jsxs(SheetContent, {
            onOpenAutoFocus: (e)=>e.preventDefault(),
            children: [
                /*#__PURE__*/ _jsx(SheetHeader, {
                    leading: /*#__PURE__*/ _jsx(Logo, {}),
                    children: /*#__PURE__*/ _jsx(SheetTitle, {
                        children: "Connect wallet"
                    })
                }),
                /*#__PURE__*/ _jsx(WalletConnect, {
                    onEnableTrading: createOrderlyKey,
                    onSignIn: onSignIn,
                    onComplete: onComplete,
                    ...props
                })
            ]
        })
    });
});
export const WalletConnectDialog = create((props)=>{
    const { visible, hide, resolve, reject, onOpenChange, onSignIn, onComplete, createOrderlyKey } = useWalletConnect();
    const _onOpenChange = useCallback((open)=>{
        // console.log(open);
        if (!open) reject("cancel");
        onOpenChange(open);
    }, []);
    return /*#__PURE__*/ _jsx(Dialog, {
        open: visible,
        onOpenChange: _onOpenChange,
        children: /*#__PURE__*/ _jsxs(DialogContent, {
            maxWidth: "sm",
            closable: true,
            onOpenAutoFocus: (e)=>e.preventDefault(),
            className: "orderly-bg-base-800 desktop:orderly-max-w-[400px] orderly-px-[24px] orderly-py-6",
            children: [
                /*#__PURE__*/ _jsx(DialogHeader, {
                    children: /*#__PURE__*/ _jsx(DialogTitle, {
                        children: "Connect wallet"
                    })
                }),
                /*#__PURE__*/ _jsx(DialogBody, {
                    children: /*#__PURE__*/ _jsx(WalletConnect, {
                        onEnableTrading: createOrderlyKey,
                        onSignIn: onSignIn,
                        onComplete: onComplete,
                        ...props
                    })
                })
            ]
        })
    });
});
export const showAccountConnectorModal = async (props)=>{
    const matches = window.matchMedia(MEDIA_TABLET).matches;
    if (matches) {
        return await modal.show(WalletConnectSheet, props);
    } else {
        return await modal.show(WalletConnectDialog, props);
    }
};

//# sourceMappingURL=walletModal.js.map