import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useEffect, useRef } from "react";
import classNames from "classnames";
import { ArrowDown } from "@nutui/icons-react-taro";
import { View } from "@tarojs/components";
import { useConfig, useRtl } from "../configprovider/index";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
import { useTableSticky } from "./utils";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    columns: [],
    data: [],
    bordered: true,
    striped: false,
    noData: '',
    sorterIcon: null,
    showHeader: true
});
export var Table = function(props) {
    var locale = useConfig().locale;
    var rtl = useRtl();
    defaultProps.noData = locale.noData;
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, style = _ref.style, columns = _ref.columns, data = _ref.data, bordered = _ref.bordered, summary = _ref.summary, striped = _ref.striped, noData = _ref.noData, sorterIcon = _ref.sorterIcon, showHeader = _ref.showHeader, onSort = _ref.onSort, rest = _object_without_properties(_ref, [
        "children",
        "className",
        "style",
        "columns",
        "data",
        "bordered",
        "summary",
        "striped",
        "noData",
        "sorterIcon",
        "showHeader",
        "onSort"
    ]);
    var sortedMapping = useRef({});
    var _usePropsValue = _sliced_to_array(usePropsValue({
        defaultValue: data,
        finalValue: []
    }), 2), innerValue = _usePropsValue[0], setValue = _usePropsValue[1];
    var _useTableSticky = useTableSticky(columns, rtl), isSticky = _useTableSticky.isSticky, stickyLeftWidth = _useTableSticky.stickyLeftWidth, stickyRightWidth = _useTableSticky.stickyRightWidth, getStickyClass = _useTableSticky.getStickyClass, getStickyStyle = _useTableSticky.getStickyStyle;
    useEffect(function() {
        setValue(data);
    }, [
        data
    ]);
    var classPrefix = 'nut-table';
    var headerClassPrefix = "".concat(classPrefix, "-main-head-tr");
    var bodyClassPrefix = "".concat(classPrefix, "-main-body-tr");
    var cls = classNames(classPrefix, className);
    var handleSorterClick = function(item) {
        if (item.sorter && !sortedMapping.current[item.key]) {
            var copied = _to_consumable_array(innerValue);
            if (typeof item.sorter === 'function') {
                copied.sort(item.sorter);
            } else if (item.sorter === 'default') {
                copied.sort();
            }
            sortedMapping.current[item.key] = true;
            setValue(copied, true);
            onSort && onSort(item, copied);
        } else {
            sortedMapping.current[item.key] = false;
            setValue(data);
        }
    };
    var cellClasses = function(item) {
        var _obj;
        return _obj = {}, _define_property(_obj, "".concat(headerClassPrefix, "-border"), bordered), _define_property(_obj, "".concat(headerClassPrefix, "-align").concat(item.align ? item.align : ''), true), _obj;
    };
    var getColumnItem = function(value) {
        return columns.filter(function(item) {
            return item.key === value;
        })[0];
    };
    var renderHeadCells = function() {
        return columns.map(function(item, index) {
            return /*#__PURE__*/ React.createElement(View, {
                className: classNames("".concat(headerClassPrefix, "-th"), cellClasses(item), getStickyClass(item.key)),
                key: item.key,
                onClick: function() {
                    return handleSorterClick(item);
                },
                style: getStickyStyle(item.key)
            }, item.title, "\xa0", item.sorter && (sorterIcon || /*#__PURE__*/ React.createElement(ArrowDown, {
                width: "12px",
                height: "12px"
            })));
        });
    };
    var sortDataItem = function() {
        return columns.map(function(columns) {
            return [
                columns.key,
                columns.render
            ];
        });
    };
    var renderBodyTds = function(item, rowIndex) {
        return sortDataItem().map(function(param) {
            var _param = _sliced_to_array(param, 2), value = _param[0], render = _param[1];
            return /*#__PURE__*/ React.createElement(View, {
                className: classNames("".concat(bodyClassPrefix, "-td"), cellClasses(getColumnItem(value)), getStickyClass(value)),
                key: value,
                style: getStickyStyle(value)
            }, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ React.createElement(View, null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
        });
    };
    var renderBodyTrs = function() {
        return innerValue.map(function(item, index) {
            var inner = renderBodyTds(item, index);
            var rowRender = item.rowRender;
            if (rowRender && typeof rowRender === 'function') {
                return rowRender(item, index, {
                    inner: inner
                });
            }
            return /*#__PURE__*/ React.createElement(View, {
                className: bodyClassPrefix,
                key: index
            }, inner);
        });
    };
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: cls
    }, rest), /*#__PURE__*/ React.createElement(View, {
        className: classNames("".concat(classPrefix, "-wrapper ").concat(isSticky ? "".concat(classPrefix, "-wrapper-sticky") : '')),
        style: style
    }, /*#__PURE__*/ React.createElement(View, {
        className: classNames("".concat(classPrefix, "-main"), _define_property({}, "".concat(classPrefix, "-main-striped"), striped))
    }, showHeader && /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-main-head")
    }, /*#__PURE__*/ React.createElement(View, {
        className: headerClassPrefix
    }, renderHeadCells())), /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-main-body")
    }, renderBodyTrs()))), isSticky ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-sticky-left"),
        style: {
            width: stickyLeftWidth
        }
    }), /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-sticky-right"),
        style: {
            width: stickyRightWidth
        }
    })) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ React.createElement(View, {
        className: "".concat(classPrefix, "-summary")
    }, summary || noData));
};
Table.displayName = 'NutTable';
