import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useEffect, useState } from "react";
import { Markets } from "../../../../../block/markets";
import { ArrowIcon } from "../../../../../icon";
import { Sheet, SheetContent, SheetTrigger } from "../../../../../sheet";
import { useSymbolsInfo, useMarketsStream } from "@orderly.network/hooks";
import { TradingPageContext } from "../../../../../page";
export const Market = (props)=>{
    const { symbol } = props;
    const [open, setOpen] = useState(false);
    const symbolConfig = useSymbolsInfo();
    const { data } = useMarketsStream();
    const { onSymbolChange } = useContext(TradingPageContext);
    const onSymbolClick = useCallback((symbol)=>{
        setOpen(false);
        onSymbolChange?.(symbol);
    }, [
        onSymbolChange
    ]);
    const [innerHeight, setInnerHeight] = useState(window.innerHeight - 180);
    useEffect(()=>{
        const handleResize = ()=>{
            setInnerHeight(window.innerHeight - 180);
        };
        window.addEventListener('resize', handleResize);
        return ()=>{
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    return /*#__PURE__*/ _jsxs(Sheet, {
        open: open,
        onOpenChange: setOpen,
        children: [
            /*#__PURE__*/ _jsx(SheetTrigger, {
                asChild: true,
                children: /*#__PURE__*/ _jsxs("button", {
                    className: "orderly-flex orderly-items-center orderly-gap-1",
                    children: [
                        /*#__PURE__*/ _jsx("span", {
                            children: symbolConfig[symbol]("name")
                        }),
                        /*#__PURE__*/ _jsx(ArrowIcon, {
                            size: 8,
                            className: "orderly-fill-base-contrast-54"
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsx(SheetContent, {
                id: "orderly-markets-sheet-content",
                side: "left",
                closeable: false,
                className: "orderly-w-84% orderly-h-100vh",
                onOpenAutoFocus: (event)=>event.preventDefault(),
                children: /*#__PURE__*/ _jsx(Markets, {
                    // @ts-ignore
                    dataSource: data,
                    onItemClick: onSymbolClick,
                    listHeight: innerHeight
                })
            })
        ]
    });
};

//# sourceMappingURL=market.js.map