"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuickTable = void 0;
const react_1 = __importStar(require("react"));
const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
const react_window_1 = require("react-window");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const useInfiniteQuery_1 = require("./useInfiniteQuery");
const RenderAs_1 = require("./RenderAs");
const TableHeader_1 = require("./TableHeader");
const QuickTable = ({ data, width = 300, height = 300, queryId, query, getQueryItems, onRowClick, onCellClick, style, }) => {
    const [sortOptions, setSortOptions] = (0, react_1.useState)({
        $field: 'createdAt',
        $order: 'desc',
    });
    const [horizontalScrollOffset, setHorizontalScrollOffset] = (0, react_1.useState)(0);
    let w = width;
    let h = height;
    let COLUMN_WIDTH = 124;
    let ROW_HEIGHT = 60;
    const columnNames = [...new Set(data.flatMap(Object.keys))];
    const Cell = ({ columnIndex, rowIndex, style }) => {
        return (react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                alignItems: 'center',
                borderBottom: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`,
                ...style,
            }, onClick: () => {
                onRowClick(data[rowIndex], rowIndex);
                onCellClick(data[rowIndex][columnNames[columnIndex]], rowIndex, columnIndex);
            } },
            react_1.default.createElement(RenderAs_1.RenderAs, { input: data[rowIndex][columnNames[columnIndex]], colName: columnNames[columnIndex] })));
    };
    const result = (0, useInfiniteQuery_1.useInfiniteQuery)({
        query,
        getQueryItems,
        rowHeight: 60,
        queryId: queryId + sortOptions.$field + sortOptions.$order,
        sortOptions: sortOptions,
        itemCount: data?.length,
        height: h,
    });
    console.log(result, 'Result>?');
    const scrollbarColor = (0, varsUtilities_1.color)('border', 'default', 'strong');
    const transparentAreaColor = (0, varsUtilities_1.color)('background', 'default', 'surface');
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            width: w,
            height: h,
            '& .grid-class': {
                scrollbarGutter: 'stable',
                overflowY: 'overlay',
                overflowX: 'overlay',
                // minWidth: 'fit-content', // <=== this breaks it
                // firefox
                scrollbarColor: `${scrollbarColor} transparent`,
                scrollbarWidth: 'thin',
                '&::-webkit-scrollbar': {
                    visibility: 'hidden',
                },
                // the rest
                '&::-webkit-scrollbar:vertical': {
                    width: '8px',
                },
                '&::-webkit-scrollbar:horizontal': {
                    height: '8px',
                },
                '@media (hover: hover)': {
                    '&:hover': {
                        // the rest
                        '&::-webkit-scrollbar': {
                            visibility: 'visible',
                        },
                        '&::-webkit-scrollbar-thumb': {
                            backgroundColor: scrollbarColor,
                            borderRadius: '4px',
                        },
                        '&::-webkit-scrollbar-thumb:vertical': {
                            borderRight: `2px solid ${transparentAreaColor}`,
                            minHeight: '32px',
                        },
                        '&::-webkit-scrollbar-thumb:horizontal': {
                            borderBottom: `2px solid ${transparentAreaColor}`,
                            minWidth: '32px',
                        },
                    },
                },
            },
        } },
        react_1.default.createElement(react_virtualized_auto_sizer_1.default, null, ({ height, width }) => (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(TableHeader_1.TableHeader, { width: width, columnWidth: COLUMN_WIDTH, headerColumns: columnNames, scrollLeft: horizontalScrollOffset }),
            react_1.default.createElement(react_window_1.VariableSizeGrid, { className: "grid-class", height: h, rowCount: data?.length, columnCount: columnNames.length, width: w, rowHeight: (index) => ROW_HEIGHT, columnWidth: (index) => COLUMN_WIDTH, onScroll: (e) => {
                    console.log('horizontal scroll??', e);
                    setHorizontalScrollOffset(e.scrollLeft);
                    //       result.onScrollY(e.scrollTop)
                }, style: { ...style } }, Cell))))));
};
exports.QuickTable = QuickTable;
//# sourceMappingURL=index.js.map