"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 _endReachedBox = require("../listView/endReachedBox");
const Table = (props)=>{
    const wrapRef = (0, _react.useRef)(null);
    const { dataSource, columns, showMaskElement = true, ...rest } = props;
    const [maskLayout, setMaskLayout] = (0, _react.useState)({
        left: 0,
        right: 0,
        top: 44.5,
        bottom: 0
    });
    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-flex orderly-z-20 orderly-flex-col orderly-justify-center orderly-items-center orderly-bg-base-900/30 orderly-backdrop-blur-sm",
            style: {
                ...maskLayout
            },
            children: content
        });
    }, [
        props.dataSource,
        props.loading,
        maskLayout
    ]);
    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.scrollLeft + wrapRef.current.clientWidth >= wrapRef.current.scrollWidth) {
            wrapRef.current.setAttribute("data-right", "free");
        } else {
            wrapRef.current.setAttribute("data-right", "fixed");
        }
    }, 50);
    const onMaskResize = (0, _hooks.useDebouncedCallback)((entry)=>{
        // console.log("mask resize", entry);
        const leftDivide = entry.target.parentElement?.querySelector(".table-left-fixed-divide");
        const rightDivide = entry.target.parentElement?.querySelector(".table-right-fixed-divide");
        const tableHeader = wrapRef.current?.querySelector(".orderly-ui-table-thead");
        if (leftDivide) {
            const left = leftDivide.getBoundingClientRect();
        // console.log("leftDivide", left);
        // setMaskLayout((layout) => ({ ...layout, left }));
        }
        if (rightDivide) {
            const right = rightDivide.getBoundingClientRect();
            const r = right.right > 0 ? entry.contentRect.right - right.right : 0;
            setMaskLayout((layout)=>({
                    ...layout,
                    right: r
                }));
        }
        if (tableHeader) {
            const top = tableHeader.getBoundingClientRect();
            setMaskLayout((layout)=>({
                    ...layout,
                    top: top.height
                }));
        }
    }, 200);
    (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);
                onMaskResize(entry);
            }
        });
        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", {
                id: props.id,
                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.jsx)(_endReachedBox.EndReachedBox, {
                        onEndReached: ()=>{
                            // if (!props.loading) {
                            props.loadMore?.();
                        // }
                        },
                        children: /*#__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
                                })
                            ]
                        })
                    }),
                    showMaskElement && maskElement
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_fixedDivide.FixedDivide, {})
        ]
    });
};

//# sourceMappingURL=table.js.map