import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ListView } from "../../../listView";
import { Numeral, Text } from "../../../text";
import { SortGroup } from "./sortGroup";
import { cn } from "../../../utils/css";
import { NetworkImage } from "../../../icon";
import { useSymbolsInfo } from "@orderly.network/hooks";
export const ListViewFull = /*#__PURE__*/ forwardRef((props, ref)=>{
    const config = useSymbolsInfo();
    const renderItem = (item, index, extraData)=>{
        if (config.isNil) return null;
        const symbolInfo = config?.[item.symbol];
        const baseDp = symbolInfo("quote_dp", 2);
        return /*#__PURE__*/ _jsxs("div", {
            onMouseEnter: ()=>{
                props.updateActiveIndex?.(index);
            },
            className: cn("orderly-grid orderly-grid-cols-5 orderly-py-3 orderly-px-5 orderly-cursor-pointer orderly-h-[46px] hover:orderly-bg-base-800", {
                "orderly-bg-base-contrast/5": extraData === index,
                "orderly-grid-cols-6": props.suffixRender
            }),
            onClick: ()=>props.onItemClick?.(item),
            children: [
                /*#__PURE__*/ _jsxs("div", {
                    className: "orderly-col-span-2 orderly-flex orderly-items-center",
                    children: [
                        props.prefixRender && props.prefixRender(item, extraData),
                        /*#__PURE__*/ _jsx(NetworkImage, {
                            type: "symbol",
                            symbol: item.symbol,
                            size: "small",
                            className: "orderly-mr-2"
                        }),
                        /*#__PURE__*/ _jsx(Text, {
                            rule: "symbol",
                            children: item.symbol
                        }),
                        item.leverage && /*#__PURE__*/ _jsx("div", {
                            className: "orderly-ml-1 orderly-rounded-sm orderly-px-1 orderly-py-[2px] orderly-flex orderly-items-center orderly-text-3xs orderly-text-primary orderly-bg-base-600",
                            children: `${item.leverage}x`
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-col-span-1 orderly-text-right",
                    children: /*#__PURE__*/ _jsx(Numeral, {
                        precision: baseDp,
                        children: item["24h_close"]
                    })
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-col-span-1 orderly-text-right",
                    children: /*#__PURE__*/ _jsx(Numeral, {
                        coloring: true,
                        rule: "percentages",
                        showIcon: true,
                        icons: {
                            loss: /*#__PURE__*/ _jsx("div", {
                                children: "-"
                            }),
                            profit: /*#__PURE__*/ _jsx("div", {
                                children: "+"
                            })
                        },
                        children: item?.change ?? 0
                    })
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-col-span-1 orderly-text-right orderly-text-base-contrast-54",
                    children: /*#__PURE__*/ _jsx(Numeral, {
                        rule: "human",
                        className: "orderly-text-base-contrast-54",
                        children: item?.["24h_amount"]
                    })
                }),
                props.suffixRender && /*#__PURE__*/ _jsx("div", {
                    className: "orderly-col-span-1 orderly-text-right orderly-text-base-contrast-54",
                    children: props.suffixRender(item, index)
                })
            ]
        });
    };
    return /*#__PURE__*/ _jsxs("div", {
        children: [
            /*#__PURE__*/ _jsx(SortGroup, {
                readLastSortCondition: props.readLastSortCondition,
                onChange: props.onSort,
                hasSuffix: props.suffixRender !== undefined
            }),
            /*#__PURE__*/ _jsx(ListView, {
                // @ts-ignore
                ref: ref,
                dataSource: props.dataSource,
                // @ts-ignore
                renderItem: renderItem,
                className: "orderly-text-xs orderly-overflow-y-auto orderly-bg-base-900",
                contentClassName: "orderly-space-y-0",
                // extraData={props.activeIndex}
                extraData: props.favoriteTabs,
                style: props.maxHeight ? {
                    height: `${props.maxHeight}px`
                } : {}
            })
        ]
    });
});

//# sourceMappingURL=listview.js.map