import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { MEDIA_TABLET } from "@orderly.network/types";
import { useMediaQuery } from "@orderly.network/hooks";
import { MobileTokenSelect } from "./tokenSelect.mobile";
import { DesktopTokenSelect } from "./tokenSelect.desktop";
import { ArrowDownIcon, NetworkImage } from "../../../icon";
import { cn } from "../../../utils";
export const TokenSelect = (props)=>{
    const { tokens } = props;
    const [open, setOpen] = useState(false);
    const isMobile = useMediaQuery(MEDIA_TABLET);
    const token = useMemo(()=>{
        if (!!props.token) {
            return props.token;
        }
        // default show USDC when no token selected
        return {
            symbol: "USDC"
        };
    }, [
        props.token
    ]);
    const disabled = (tokens?.length ?? 0) < 2 || props.disabled;
    const trigger = useMemo(()=>{
        return /*#__PURE__*/ _jsxs("button", {
            disabled: disabled,
            className: "orderly-token-select orderly-flex orderly-items-center orderly-gap-2 orderly-text-3xs orderly-text-base-contrast-80 orderly-mr-2 desktop:orderly-text-xs",
            onClick: (event)=>{
                event.preventDefault();
                event.stopPropagation();
                setOpen(!open);
            },
            children: [
                /*#__PURE__*/ _jsx(NetworkImage, {
                    type: token ? "token" : "placeholder",
                    name: token?.symbol,
                    size: "small",
                    rounded: true
                }),
                /*#__PURE__*/ _jsx("span", {
                    children: token?.symbol
                }),
                tokens && tokens.length > 1 && /*#__PURE__*/ _jsx(ArrowDownIcon, {
                    className: cn("orderly-transition orderly-duration-300", open ? "orderly-rotate-180" : "orderly-rotate-0"),
                    size: 16
                })
            ]
        });
    }, [
        tokens,
        token,
        disabled,
        open
    ]);
    const commonProps = {
        open,
        onOpenChange: setOpen,
        trigger,
        tokens: props.tokens,
        fetchBalance: props.fetchBalance,
        onTokenChange: props.onTokenChange,
        disabled
    };
    if (isMobile) {
        return /*#__PURE__*/ _jsx(MobileTokenSelect, {
            ...commonProps
        });
    }
    return /*#__PURE__*/ _jsx(DesktopTokenSelect, {
        ...commonProps
    });
};

//# sourceMappingURL=tokenSelect.js.map