import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo, useState } from "react";
import Button from "../../button";
import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "../../sheet";
import { AccountInfo } from "./sections/accountInfo";
import { Text } from "../../text";
import { AccountTotal } from "./sections/accountTotal";
import { AccountStatusEnum } from "@orderly.network/types";
import { Logo } from "../../logo";
import { Chains } from "./sections/chains";
import { OrderlyAppContext } from "../../provider";
export const AccountStatusBar = (props)=>{
    const { status = AccountStatusEnum.NotConnected } = props;
    const { errors } = useContext(OrderlyAppContext);
    const [infoOpen, setInfoOpen] = useState(false);
    const buttonLabel = useMemo(()=>{
        switch(status){
            case AccountStatusEnum.NotConnected:
                return "Connect wallet";
            case AccountStatusEnum.Connected:
            case AccountStatusEnum.NotSignedIn:
            case AccountStatusEnum.SignedIn:
            case AccountStatusEnum.DisabledTrading:
            case AccountStatusEnum.EnableTrading:
                return /*#__PURE__*/ _jsx(Text, {
                    rule: "address",
                    range: [
                        4,
                        4
                    ],
                    children: props.address
                });
        }
    }, [
        status,
        props.address
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        id: "orderly-bottom-bar",
        className: "orderly-flex orderly-items-center orderly-justify-between orderly-w-full",
        children: [
            status !== AccountStatusEnum.NotConnected && !errors?.ChainNetworkNotSupport ? /*#__PURE__*/ _jsx(AccountTotal, {
                status: status,
                currency: props.currency,
                totalValue: props.totalValue,
                accountInfo: props.accountInfo
            }) : /*#__PURE__*/ _jsx("div", {}),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-gap-2",
                children: [
                    /*#__PURE__*/ _jsx(Chains, {
                        disabled: status < AccountStatusEnum.NotConnected
                    }),
                    status === AccountStatusEnum.NotConnected ? /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-botom-bar-not-connect-button",
                        size: "small",
                        loading: props.loading,
                        // variant={"gradient"}
                        className: "orderly-bg-primary orderly-text-base-contrast orderly-text-4xs hover:orderly-text-base-80 orderly-h-[30px]",
                        onClick: ()=>props.onConnect?.(),
                        children: buttonLabel
                    }) : /*#__PURE__*/ _jsxs(Sheet, {
                        open: infoOpen,
                        onOpenChange: setInfoOpen,
                        children: [
                            /*#__PURE__*/ _jsx(SheetTrigger, {
                                asChild: true,
                                children: /*#__PURE__*/ _jsx(Button, {
                                    id: "orderly-botom-bar-connect-button",
                                    size: "small",
                                    // variant={"gradient"}
                                    className: "orderly-bg-primary orderly-text-base-contrast orderly-text-4xs hover:orderly-text-base-80 orderly-h-[30px]",
                                    loading: props.loading,
                                    disabled: props.loading || errors?.ChainNetworkNotSupport,
                                    children: buttonLabel
                                })
                            }),
                            /*#__PURE__*/ _jsxs(SheetContent, {
                                id: "my-account",
                                forceMount: true,
                                children: [
                                    /*#__PURE__*/ _jsx(SheetHeader, {
                                        id: "my-account-sheet-title",
                                        leading: /*#__PURE__*/ _jsx(Logo.secondary, {
                                            size: 30
                                        }),
                                        children: "My account"
                                    }),
                                    /*#__PURE__*/ _jsx(AccountInfo, {
                                        onDisconnect: props.onDisconnect,
                                        close: ()=>setInfoOpen(false),
                                        showGetTestUSDC: props.showGetTestUSDC
                                    })
                                ]
                            })
                        ]
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=accountStatusBar.js.map