"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Table", {
    enumerable: true,
    get: function() {
        return Table;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _thead = require("./thead");
const _css = require("../utils/css");
const _spinner = require("../spinner");
const _emptyView = require("../listView/emptyView");
const _colgroup = require("./colgroup");
const _tableContext = require("./tableContext");
const _hooks = require("@orderly.network/hooks");
const _fixedDivide = require("./fixedDivide");
const _tbody = require("./tbody");
const _ = require("..");
const Table = (props)=>{
    const wrapRef = (0, _react.useRef)(null);
    const { dataSource, columns, showMaskElement = true, ...rest } = props;
    // console.log("props sortable:: ", props.sortable);
    const maskElement = (0, _react.useMemo)(()=>{
        if (Array.isArray(props.dataSource) && props.dataSource?.length > 0) {
            return null;
        }
        let content = /*#__PURE__*/ (0, _jsxruntime.jsx)(_spinner.Spinner, {});
        if (props.dataSource?.length === 0 && !props.loading) {
            content = /*#__PURE__*/ (0, _jsxruntime.jsx)(_emptyView.EmptyView, {});
        }
        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
            className: "orderly-absolute orderly-w-full orderly-z-20 orderly-left-0 orderly-top-0 orderly-bottom-0 orderly-right-0 orderly-flex orderly-justify-center orderly-items-center orderly-bg-base-900/30 orderly-backdrop-blur-sm",
            children: content
        });
    }, [
        props.dataSource,
        props.loading
    ]);
    const needFixed = (0, _react.useMemo)(()=>{
        return props.columns.some((col)=>col.fixed === "left" || col.fixed === "right");
    }, [
        props.columns
    ]);
    const onScroll = (0, _hooks.useDebouncedCallback)((scrollLeft)=>{
        // console.log(scrollLeft);
        if (!wrapRef.current || !needFixed) {
            return;
        }
        if (scrollLeft > 0) {
            // setLeftFixed(true);
            wrapRef.current?.setAttribute("data-left", "fixed");
        } else {
            wrapRef.current?.setAttribute("data-left", "free");
        }
        if (// wrapRef.current.scrollWidth - wrapRef.current.scrollLeft === wrapRef.current.clientWidth
        wrapRef.current.scrollLeft + wrapRef.current.clientWidth >= wrapRef.current.scrollWidth) {
            wrapRef.current.setAttribute("data-right", "free");
        } else {
            wrapRef.current.setAttribute("data-right", "fixed");
        }
    }, 50);
    (0, _react.useEffect)(()=>{
        if (!wrapRef.current) {
            return;
        }
        onScroll(0);
        // use ResizeObserver observe wrapRef
        const resizeObserver = new ResizeObserver((entries)=>{
            for (const entry of entries){
                onScroll(entry.target.scrollLeft);
            }
        });
        resizeObserver.observe(wrapRef.current);
        return ()=>{
            resizeObserver.disconnect();
        };
    }, []);
    (0, _react.useEffect)(()=>{
        if (!wrapRef.current) return;
        const bodyBgColor = window.getComputedStyle(document.body).backgroundColor;
        // body.style.setProperty("--table-header-height", "48px");
        wrapRef.current.style.setProperty("--table-background-color", bodyBgColor);
    }, []);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_tableContext.TableProvider, {
        columns: props.columns,
        dataSource: props.dataSource,
        canExpand: typeof props.expandRowRender === "function",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                ref: wrapRef,
                className: (0, _css.cn)("orderly-ui-table orderly-relative orderly-flex-col orderly-overflow-x-auto orderly-peer", props.loading && "orderly-overflow-hidden", props.className),
                style: {
                    height: "calc(100% - 2px)"
                },
                onScroll: (e)=>onScroll(e.currentTarget.scrollLeft),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_thead.TableHeader, {
                        columns: props.columns,
                        className: props.headerClassName,
                        bordered: props.bordered,
                        justified: props.justified
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("table", {
                        className: (0, _css.cn)("orderly-table-fixed orderly-border-collapse orderly-w-full"),
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_colgroup.ColGroup, {
                                columns: props.columns
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_tbody.TBody, {
                                ...rest
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", {
                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.EndReachedBox, {
                                            className: "orderly-h-[1px] orderly-invisible",
                                            onEndReached: props.scrollToEnd
                                        })
                                    })
                                })
                            })
                        ]
                    }),
                    showMaskElement && maskElement
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_fixedDivide.FixedDivide, {})
        ]
    });
};

//# sourceMappingURL=table.js.map